/* =============================================
   DESIGN TOKENS — CSS CUSTOM PROPERTIES
   ============================================= */
:root,
[data-theme="dark"] {
  /* Surfaces */
  --color-bg:               #080b0f;
  --color-surface:          #0d1117;
  --color-surface-2:        #111820;
  --color-surface-offset:   #151d28;
  --color-surface-dynamic:  #1c2535;

  /* Borders & dividers */
  --color-divider:          #1e2d3d;
  --color-border:           #243447;

  /* Text */
  --color-text:             #e8edf2;
  --color-text-muted:       #7a90a4;
  --color-text-faint:       #3d5166;

  /* Brand */
  --color-primary:          #00d4ff;
  --color-primary-hover:    #00b8e0;
  --color-primary-active:   #009cc0;
  --color-primary-highlight:#0a1e2b;
  --color-accent-2:         #4f8eff;
  --color-success:          #00ff88;

  /* Shadows */
  --shadow-sm:   0 1px 4px oklch(0 0 0 / 0.4);
  --shadow-md:   0 4px 24px oklch(0 0 0 / 0.5);
  --shadow-lg:   0 16px 48px oklch(0 0 0 / 0.6);
  --shadow-glow: 0 0 24px oklch(0.7 0.2 195 / 0.3);
}

[data-theme="light"] {
  --color-bg:               #f0f4f8;
  --color-surface:          #f8fafc;
  --color-surface-2:        #ffffff;
  --color-surface-offset:   #e8edf3;
  --color-surface-dynamic:  #dde4ed;
  --color-divider:          #cdd6e0;
  --color-border:           #b8c5d1;
  --color-text:             #0d1b2a;
  --color-text-muted:       #4a6278;
  --color-text-faint:       #8fa5b5;
  --color-primary:          #0087a8;
  --color-primary-hover:    #006e8c;
  --color-primary-active:   #005570;
  --color-primary-highlight:#d0eaf2;
  --color-accent-2:         #2860c8;
  --color-success:          #00885a;
  --shadow-sm:   0 1px 4px oklch(0 0 0 / 0.1);
  --shadow-md:   0 4px 24px oklch(0 0 0 / 0.12);
  --shadow-lg:   0 16px 48px oklch(0 0 0 / 0.15);
  --shadow-glow: 0 0 24px oklch(0.5 0.15 200 / 0.2);
}

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

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-hero: clamp(2.5rem, 6vw, 5rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Transitions */
  --transition-fast:        0.15s ease;
  --transition-base:        0.25s ease;
  --transition-interactive: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --nav-height: 64px;
  --max-width:  1200px;
}