:root {
  /* ── Colour Tokens (warm cultural palette) ─────────── */
  --bg-primary:    #0c0a09;
  --bg-secondary:  #1c1917;
  --bg-surface:    rgba(255, 245, 235, 0.03);
  --bg-surface-hover: rgba(255, 245, 235, 0.06);

  --text-primary:   #faf9f6;
  --text-secondary: #c8b8a8;
  --text-muted:     #8a7a6a;

  --accent:         #d4a853;
  --accent-hover:   #e0bc6e;
  --accent-glow:    rgba(212, 168, 83, 0.3);
  --accent-subtle:  rgba(212, 168, 83, 0.08);

  --color-warm:     #c2544d;
  --color-warm-glow: rgba(194, 84, 77, 0.25);
  --color-wine:     #7a2948;
  --color-cream:    #fff8f0;

  /* ── Glass Tokens ─────────────────────────────────── */
  --glass-bg:       rgba(255, 248, 240, 0.04);
  --glass-bg-hover: rgba(255, 248, 240, 0.08);
  --glass-blur:     20px;
  --glass-saturation: 1.6;
  --glass-border:   rgba(255, 245, 235, 0.08);
  --glass-border-hover: rgba(255, 245, 235, 0.15);
  --glass-highlight: rgba(255, 248, 240, 0.06);
  --glass-radius:   20px;
  --glass-radius-sm: 12px;
  --glass-radius-full: 9999px;

  /* ── Typography ───────────────────────────────────── */
  --font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  --fs-display-xl: clamp(3rem, 6vw + 1rem, 5.5rem);
  --fs-display-lg: clamp(2.25rem, 4vw + 0.5rem, 3.5rem);
  --fs-display-md: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  --fs-display-sm: clamp(1.25rem, 2vw + 0.25rem, 1.75rem);
  --fs-body-lg:    1.125rem;
  --fs-body:       1rem;
  --fs-body-sm:    0.875rem;
  --fs-caption:    0.75rem;

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.6;

  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.1em;

  /* ── Spacing (8px grid) ───────────────────────────── */
  --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;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── Shadows ──────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.15);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 40px var(--accent-glow);

  /* ── Cursor Glow ──────────────────────────────────── */
  --cursor-glow-color: rgba(212, 168, 83, 0.2);
  --cursor-glow-blend: screen;

  /* ── Animation ────────────────────────────────────── */
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    300ms;
  --dur-slow:    500ms;
  --dur-reveal:  800ms;

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

/* ── Light mode overrides ──────────────────────────── */
[data-theme="light"] {
  --bg-primary:    #fdf8f3;
  --bg-secondary:  #f5ede4;
  --bg-surface:    rgba(120, 80, 40, 0.04);
  --bg-surface-hover: rgba(120, 80, 40, 0.07);

  --text-primary:   #2c1810;
  --text-secondary: #6b5545;
  --text-muted:     #a08a78;

  --accent:         #b8862d;
  --accent-hover:   #a07525;
  --accent-glow:    rgba(184, 134, 45, 0.2);
  --accent-subtle:  rgba(184, 134, 45, 0.08);

  --color-warm:     #b34040;
  --color-warm-glow: rgba(179, 64, 64, 0.15);
  --color-wine:     #8a2040;

  --glass-bg:       rgba(255, 255, 255, 0.55);
  --glass-bg-hover: rgba(255, 255, 255, 0.7);
  --glass-border:   rgba(120, 80, 40, 0.08);
  --glass-border-hover: rgba(120, 80, 40, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.7);

  --shadow-sm:  0 1px 3px rgba(80,50,20,0.06);
  --shadow-md:  0 4px 16px rgba(80,50,20,0.08);
  --shadow-lg:  0 8px 32px rgba(80,50,20,0.1);
  --shadow-glow: 0 0 40px var(--accent-glow);

  --cursor-glow-color: rgba(184, 134, 45, 0.15);
  --cursor-glow-blend: multiply;
}