:root {
  /* Backgrounds */
  --bg-primary:    #0a0a0b;
  --bg-secondary:  #111113;
  --bg-tertiary:   #19191c;
  --bg-card:       rgba(255,255,255,0.045);
  --bg-card-hover: rgba(255,255,255,0.075);

  /* Borders */
  --border:        rgba(255,255,255,0.10);
  --border-hover:  rgba(255,255,255,0.22);
  --border-accent: rgba(177,128,255,0.65);

  /* Accent — Purple */
  --purple:        #8b5cf6;
  --purple-light:  #c4b5fd;
  --purple-glow:   rgba(139,92,246,0.26);

  /* Accent — Cyan */
  --cyan:          #2dd4bf;
  --cyan-light:    #99f6e4;
  --cyan-glow:     rgba(6,182,212,0.22);

  /* Accent — Gold */
  --gold:          #f59e0b;
  --gold-light:    #fbbf24;
  --gold-glow:     rgba(245,158,11,0.28);

  /* Semantic */
  --green:         #10b981;
  --red:           #ef4444;

  /* Text */
  --text-1:        #f8f7ff;
  --text-2:        #b4b1bd;
  --text-3:        #7d7987;

  /* Gradients */
  --grad-brand:  linear-gradient(120deg, #a78bfa 0%, #7c3aed 48%, #2dd4bf 115%);
  --grad-gold:   linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  --grad-hero:   radial-gradient(ellipse 62% 72% at 50% -18%, rgba(139,92,246,0.25) 0%, transparent 73%),
                 radial-gradient(ellipse 40% 48% at 92% 44%, rgba(45,212,191,0.12) 0%, transparent 76%);

  /* Typography */
  --font-body:    'Inter', system-ui, sans-serif;
  --font-display: 'Space Grotesk', system-ui, sans-serif;

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

  /* Radius */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   30px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.6);
  --shadow-purple: 0 0 40px rgba(124,58,237,0.18);

  /* Motion */
  --ease-fast:  150ms ease;
  --ease-base:  250ms ease;
  --ease-slow:  400ms ease;

  /* Layout */
  --max-w: 1200px;
  --nav-h: 76px;
}

/* Light directory theme, based on the supplied reference */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --border: #e8edf5;
  --border-hover: #cbd5e1;
  --border-accent: #2563eb;
  --purple: #2563eb;
  --purple-light: #2563eb;
  --purple-glow: rgba(37,99,235,.18);
  --cyan: #06b6d4;
  --cyan-light: #0891b2;
  --text-1: #0f172a;
  --text-2: #475569;
  --text-3: #94a3b8;
  --grad-brand: linear-gradient(135deg, #2563eb, #1d4ed8);
  --grad-hero: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --font-display: 'Satoshi', 'Inter', system-ui, sans-serif;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.03);
  --shadow-md: 0 6px 18px rgba(15,23,42,.06);
  --shadow-lg: 0 14px 36px rgba(15,23,42,.08);
  --nav-h: 70px;
}