/* variables.css - design tokens & CSS custom properties
   light/dark theme support via [data-theme] attribute */
/* dark theme (default) */
:root {
  --bg:         #030508;
  --bg-deep:    #010204;
  --surface:    #080d14;
  --surface2:   #0c1420;
  --border:     #0d2035;
  --border2:    #162c44;
  --accent:     #00e5ff;
  --accent-dim: #0099aa;
  --accent2:    #ff2d55;
  --accent3:    #39ff14;
  --accent4:    #ffbe00;
  --text:       #c8dde8;
  --text-dim:   #7a9ab0;
  --muted:      #3a5a6e;
  --white:      #f0f8ff;
  --glow-cyan:  0 0 20px rgba(0, 229, 255, 0.35);
  --glow-red:   0 0 20px rgba(255, 45, 85, 0.35);
  --glow-green: 0 0 20px rgba(57, 255, 20, 0.3);
  --glow-text:  0 0 30px rgba(0, 229, 255, 0.5);
  --grid-line:  rgba(0, 229, 255, 0.022);
  --scanline:   rgba(0, 0, 0, 0.07);
  --font-display: 'Bebas Neue', sans-serif;
  --font-mono:    'Share Tech Mono', monospace;
  --font-body:    'DM Sans', sans-serif;
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  60px;
  --space-3xl:  100px;
  --max-width:  1400px;
  --nav-h:      72px;
  --section-px: clamp(24px, 5vw, 80px);
  --radius-sm: 2px;
  --radius-md: 4px;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:     150ms;
  --t-mid:      250ms;
  --t-slow:     400ms;
  --z-base:     1;
  --z-above:    10;
  --z-overlay:  50;
  --z-modal:    100;
  --z-cursor:   9999;
}
/* light theme */
[data-theme="light"] {
  --bg:         #f0f4f8;
  --bg-deep:    #e2eaf2;
  --surface:    #ffffff;
  --surface2:   #e8f0f8;
  --border:     #c8d8e8;
  --border2:    #aabdce;
  --accent:     #0077aa;
  --accent-dim: #005580;
  --accent2:    #d0002a;
  --accent3:    #1a8a00;
  --accent4:    #b87200;
  --text:       #1a2a3a;
  --text-dim:   #3a5570;
  --muted:      #6a8090;
  --white:      #0a1520;
  --glow-cyan:  0 0 16px rgba(0, 119, 170, 0.2);
  --glow-red:   0 0 16px rgba(208, 0, 42, 0.2);
  --glow-green: 0 0 16px rgba(26, 138, 0, 0.2);
  --glow-text:  0 0 24px rgba(0, 119, 170, 0.3);
  --grid-line:  rgba(0, 119, 170, 0.06);
  --scanline:   rgba(0, 0, 0, 0);
}