:root {
  /* ---- Color: surfaces ---- */
  --bg: #05070c;
  --bg-elevated: #0a0e17;
  --surface: #0e1420;
  --surface-2: #131a2a;
  --surface-glass: rgba(19, 26, 42, 0.55);
  --surface-glass-strong: rgba(19, 26, 42, 0.78);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* ---- Color: text ---- */
  --text: #f1f4fa;
  --text-muted: #8993ac;
  --text-faint: #4d5670;

  /* ---- Color: brand ---- */
  --accent: #3ddc84;
  --accent-soft: rgba(61, 220, 132, 0.14);
  --accent-strong: #52ffa0;
  --accent-2: #f5a623;
  --accent-2-soft: rgba(245, 166, 35, 0.14);
  --danger: #ef4444;

  /* ---- Gradients ---- */
  --grad-primary: linear-gradient(135deg, #3ddc84 0%, #2bb3e8 100%);
  --grad-warm: linear-gradient(135deg, #f5a623 0%, #ef4444 100%);
  --grad-aurora: radial-gradient(60% 60% at 20% 20%, rgba(61, 220, 132, 0.25) 0%, rgba(61, 220, 132, 0) 70%),
    radial-gradient(50% 50% at 85% 30%, rgba(245, 166, 35, 0.18) 0%, rgba(245, 166, 35, 0) 70%),
    radial-gradient(55% 55% at 50% 90%, rgba(43, 179, 232, 0.16) 0%, rgba(43, 179, 232, 0) 70%);

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: clamp(2.5rem, 5vw, 3.5rem);
  --fs-4xl: clamp(2.75rem, 5.4vw, 4.5rem);

  /* ---- Spacing (8pt rhythm) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --container: 1240px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* ---- Radius ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 999px;

  /* ---- Shadow / glow ---- */
  --shadow-md: 0 10px 40px -12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 70px -20px rgba(0, 0, 0, 0.65);
  --glow-accent: 0 0 0 1px rgba(61, 220, 132, 0.25), 0 0 40px -8px rgba(61, 220, 132, 0.35);
  --glow-accent-2: 0 0 0 1px rgba(245, 166, 35, 0.25), 0 0 40px -8px rgba(245, 166, 35, 0.3);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 300ms;
  --dur-slow: 550ms;

  /* ---- Z-index scale ---- */
  --z-base: 0;
  --z-cursor: 20;
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
}