/* ============================================
   DESIGN TOKENS — Command Center (Neon Aurora Fusion)
   ============================================ */
:root {
    /* Background */
    --bg: #07080C;
    --surface: rgba(255, 255, 255, 0.03);
    --surface-hover: rgba(255, 255, 255, 0.06);
    --surface-card: rgba(255, 255, 255, 0.03);
    --surface-card-hover: rgba(255, 255, 255, 0.06);
    --surface-elevated: rgba(255, 255, 255, 0.05);
    --surface-overlay: rgba(7, 8, 12, 0.85);
    --surface-input: rgba(255, 255, 255, 0.04);
    --sidebar-bg: rgba(7, 8, 12, 0.7);

    /* Neon accent colors */
    --cyan: #00E5FF;
    --cyan-dim: rgba(0, 229, 255, 0.08);
    --cyan-glow: 0 0 20px rgba(0, 229, 255, 0.2);
    --magenta: #FF2D7B;
    --magenta-dim: rgba(255, 45, 123, 0.08);
    --magenta-glow: 0 0 20px rgba(255, 45, 123, 0.2);
    --emerald: #00E89D;
    --emerald-dim: rgba(0, 232, 157, 0.08);
    --emerald-glow: 0 0 20px rgba(0, 232, 157, 0.2);
    --amber: #FFB800;
    --amber-dim: rgba(255, 184, 0, 0.08);
    --amber-glow: 0 0 20px rgba(255, 184, 0, 0.2);
    --purple: #8B5CF6;
    --purple-dim: rgba(139, 92, 246, 0.08);
    --purple-glow: 0 0 20px rgba(139, 92, 246, 0.2);

    /* Legacy compatibility aliases */
    --gold: var(--cyan);
    --gold-gradient: linear-gradient(135deg, var(--cyan), var(--purple));
    --gold-glow: var(--cyan-glow);
    --gold-subtle: var(--cyan-dim);
    --green: var(--emerald);
    --green-bg: var(--emerald-dim);
    --red: var(--magenta);
    --red-bg: var(--magenta-dim);
    --orange: var(--amber);
    --orange-bg: var(--amber-dim);
    --indigo: var(--purple);
    --indigo-bg: var(--purple-dim);

    /* Text */
    --text-primary: #E8ECF0;
    --text-secondary: #718096;
    --text-muted: #4A5568;
    --text-on-accent: #07080C;

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);

    /* Typography */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Spacing */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
    --space-4: 16px; --space-5: 20px; --space-6: 24px;
    --space-8: 32px; --space-10: 40px; --space-12: 48px;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);

    /* Animation */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    /* Z-index */
    --z-sidebar: 100;
    --z-topbar: 150;
    --z-overlay: 200;
    --z-modal: 300;
    --z-toast: 400;
    --z-command-palette: 500;

    /* Layout */
    --sidebar-width: 240px;
    --topbar-height: 56px;
}