:root {
  /* ── Background Layers ── */
  --color-bg-base: #080a0e;
  --color-bg-surface: #0f1318;
  --color-bg-card: #141820;
  --color-bg-card-hover: #1a2030;
  --color-bg-overlay: rgba(8, 10, 14, 0.85);

  /* ── Text ── */
  --color-text-primary: #f0f2f8;
  --color-text-secondary: #9aa3b8;
  --color-text-muted: #5a6278;

  /* ── Accent — Electric Green + Neon Cyan ── */
  --color-accent-primary: #00ff88;
  --color-accent-primary-dim: rgba(0, 255, 136, 0.12);
  --color-accent-primary-hover: #00e67a;
  --color-accent-secondary: #00d4ff;
  --color-accent-secondary-dim: rgba(0, 212, 255, 0.12);

  /* ── Borders ── */
  --color-border: rgba(255, 255, 255, 0.07);
  --color-border-accent: rgba(0, 255, 136, 0.3);

  /* ── Typography ── */
  --font-sans: 'Inter', sans-serif;
  --font-display: 'Outfit', sans-serif;

  /* ── Spacing ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Radii ── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.6);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.6);
  --shadow-glow-green: 0 0 24px rgba(0,255,136,0.35);
  --shadow-glow-cyan: 0 0 24px rgba(0,212,255,0.35);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.4);

  /* ── Transitions ── */
  --ease-fast: 150ms ease;
  --ease-smooth: 300ms cubic-bezier(0.4,0,0.2,1);
  --ease-bounce: 500ms cubic-bezier(0.34,1.56,0.64,1);

  /* ── Max widths ── */
  --max-w: 1200px;
  --max-w-wide: 1400px;
}