/* ===================================================
   THEME SYSTEM — CSS Custom Properties
   =================================================== */

:root {
    /* Primary palette — overridden by JS theme engine */
    --primary: #4F46E5;
    --primary-light: #6366F1;
    --primary-dark: #4338CA;
    --primary-bg: #EEF2FF;
    --primary-rgb: 79, 70, 229;

    /* Neutrals */
    --bg: #F9FAFB;
    --bg-card: #FFFFFF;
    --bg-hover: #F3F4F6;
    --bg-input: #FFFFFF;
    --border: #E5E7EB;
    --border-light: #F3F4F6;
    --text: #111827;
    --text-secondary: #6B7280;
    --text-tertiary: #9CA3AF;
    --text-inverse: #FFFFFF;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.06);

    /* Semantic */
    --success: #10B981;
    --success-bg: #ECFDF5;
    --warning: #F59E0B;
    --warning-bg: #FFFBEB;
    --danger: #EF4444;
    --danger-bg: #FEF2F2;
    --info: #3B82F6;

    /* Priority */
    --priority-low: #10B981;
    --priority-medium: #F59E0B;
    --priority-high: #F97316;
    --priority-urgent: #EF4444;

    /* Sizing */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    --header-h: 60px;
    --sidebar-w: 260px;
    --detail-w: 480px;

    /* Transitions */
    --transition: 0.2s ease;
    --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== DARK MODE ===== */
[data-theme="dark"] {
    --bg: #0F172A;
    --bg-card: #1E293B;
    --bg-hover: #334155;
    --bg-input: #1E293B;
    --border: #334155;
    --border-light: #1E293B;
    --text: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-tertiary: #64748B;
    --primary-bg: rgba(var(--primary-rgb), 0.15);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.25);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.3);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.35);
    --success-bg: rgba(16,185,129,0.12);
    --warning-bg: rgba(245,158,11,0.12);
    --danger-bg: rgba(239,68,68,0.12);
}

/* ===== GLOBAL RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh;
}

input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
}

a { color: var(--primary); text-decoration: none; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-tertiary); border-radius: 3px; }

::selection { background: var(--primary); color: #fff; }