:root {
  /* ─── Backgrounds ─────────────────────────────────────────── */
  --bg-primary:    #0d0d1a;
  --bg-secondary:  #1a1a2e;
  --bg-card:       #16213e;

  /* ─── Surfaces (used in form/card contexts) ───────────────── */
  --surface-1:     #0d0d1a;
  --surface-2:     #1a1a2e;
  --surface-3:     #21213a;
  --surface-4:     #2a2a4a;

  /* ─── Text ────────────────────────────────────────────────── */
  --text-primary:   #e2e2f0;
  --text-secondary: #a0a0b8;
  --text-muted:     #6b6b88;

  /* ─── Accent colours ──────────────────────────────────────── */
  --accent-blue:        #4361ee;
  --accent-blue-hover:  #2d4fd8;
  --accent-blue-subtle: rgba(67, 97, 238, 0.15);
  --accent-purple:      #7209b7;
  --accent-purple-hover:#5a07a0;
  --accent-green:       #06d6a0;
  --accent-green-subtle:rgba(6, 214, 160, 0.15);
  --accent-yellow:      #ffd166;
  --accent-yellow-subtle:rgba(255, 209, 102, 0.15);
  --accent-red:         #ef476f;
  --accent-red-subtle:  rgba(239, 71, 111, 0.15);
  --accent-amber:       #f59e0b;

  /* ─── Border ──────────────────────────────────────────────── */
  --border:       #2a2a4a;
  --border-light: #3a3a5a;
  --border-focus: #4361ee;

  /* ─── Border radius ───────────────────────────────────────── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius:      0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ─── Shadows ─────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow:    0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);

  /* ─── Spacing scale (4px base) ────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ─── Typography ──────────────────────────────────────────── */
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

  --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-5xl:  3rem;

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* ─── Transitions ─────────────────────────────────────────── */
  --transition:      0.2s ease;
  --transition-fast: 0.15s ease;
  --transition-slow: 0.3s ease;

  /* ─── Z-index scale ───────────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;

  /* ─── Layout ──────────────────────────────────────────────── */
  --nav-height:    64px;
  --sidebar-width: 260px;
  --content-max:   1200px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition:      0s;
    --transition-fast: 0s;
    --transition-slow: 0s;
  }
}