/* ============================================================
   THEME TOKENS — 80s Futuristic Neon
   ============================================================ */

:root {
    /* Neon accent palette */
    --cyan:    #00e5ff;
    --magenta: #ff00ea;
    --yellow:  #ffe600;
    --green:   #00ff88;
    --red:     #ff3860;
    --orange:  #ff8c00;

    /* Sizing / spacing */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;

    /* Typography */
    --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    --text-xs:  0.75rem;
    --text-sm:  0.85rem;
    --text-base: 1rem;
    --text-lg:  1.15rem;
    --text-xl:  1.35rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Layout */
    --sidebar-width: 240px;
    --header-height: 60px;
    --max-content-width: 1200px;
}

/* ── Dark theme (default) ── */
[data-theme="dark"], :root {
    --bg-primary:   #070b1a;
    --bg-secondary: #0d1030;
    --bg-card:      #161b40;
    --bg-card-hover:#1c2250;
    --bg-input:     #0d1030;
    --bg-overlay:   rgba(7, 11, 26, 0.85);

    --border-subtle: rgba(0, 229, 255, 0.12);
    --border-medium: rgba(0, 229, 255, 0.25);
    --border-bright: rgba(0, 229, 255, 0.5);

    --text-primary:   #eaeaf0;
    --text-secondary: #9e9eb8;
    --text-muted:     #6a6a88;

    --glow-cyan:    0 0 20px rgba(0, 229, 255, 0.3), 0 0 60px rgba(0, 229, 255, 0.1);
    --glow-magenta: 0 0 20px rgba(255, 0, 234, 0.3), 0 0 60px rgba(255, 0, 234, 0.1);
    --glow-green:   0 0 20px rgba(0, 255, 136, 0.3), 0 0 60px rgba(0, 255, 136, 0.1);
    --glow-yellow:  0 0 20px rgba(255, 230, 0, 0.3), 0 0 60px rgba(255, 230, 0, 0.1);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);

    --accent: var(--cyan);
    --accent-hover: #33ecff;
}

/* ── Light theme ── */
[data-theme="light"] {
    --bg-primary:   #f0f2f8;
    --bg-secondary: #ffffff;
    --bg-card:      #ffffff;
    --bg-card-hover:#f5f7fc;
    --bg-input:     #f0f2f8;
    --bg-overlay:   rgba(240, 242, 248, 0.9);

    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-medium: rgba(0, 0, 0, 0.15);
    --border-bright: rgba(0, 151, 167, 0.4);

    --text-primary:   #1a1a2e;
    --text-secondary: #555570;
    --text-muted:     #8888a0;

    --glow-cyan:    0 2px 12px rgba(0, 151, 167, 0.15);
    --glow-magenta: 0 2px 12px rgba(194, 24, 91, 0.15);
    --glow-green:   0 2px 12px rgba(0, 150, 80, 0.15);
    --glow-yellow:  0 2px 12px rgba(200, 180, 0, 0.15);

    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.1);

    --cyan:    #0097a7;
    --magenta: #c2185b;
    --yellow:  #c8a000;
    --green:   #009650;
    --red:     #d32f2f;
    --orange:  #e65100;

    --accent: var(--cyan);
    --accent-hover: #00838f;
}