:root {
  /* ── Colour Palette ── */
  --color-canvas:           #1A1210;
  --color-surface:          #231A15;
  --color-elevated:         #2D1F19;
  --color-elevated-hover:   #3D2C22;

  --color-text-primary:     #EDE4D8;
  --color-text-secondary:   #BFA992;
  --color-text-muted:       #887460;
  --color-text-inverse:     #1A1210;

  --color-accent:           #C4714A;
  --color-accent-hover:     #D4896A;
  --color-accent-whisper:   rgba(196, 113, 74, 0.15);
  --color-accent-glow:      rgba(196, 113, 74, 0.25);

  --color-border:           #3D2C22;
  --color-border-subtle:    #2D1F19;

  /* ── Typography ── */
  --font-display:           'Instrument Serif', 'Fraunces', Georgia, serif;
  --font-body:              'Satoshi', 'Outfit', -apple-system, sans-serif;
  --font-mono:              'JetBrains Mono', 'Fira Code', monospace;

  --fs-display:             clamp(3.2rem, 7vw, 6rem);
  --fs-h1:                  clamp(2.4rem, 5vw, 4.2rem);
  --fs-h2:                  clamp(1.8rem, 3.5vw, 3rem);
  --fs-h3:                  clamp(1.4rem, 2.5vw, 2rem);
  --fs-h4:                  clamp(1.15rem, 1.5vw, 1.5rem);
  --fs-body:                clamp(1rem, 1.1vw, 1.125rem);
  --fs-body-lg:             clamp(1.125rem, 1.35vw, 1.3rem);
  --fs-small:               0.875rem;
  --fs-caption:             0.75rem;

  --fw-normal:              400;
  --fw-medium:              500;
  --fw-semibold:            600;
  --fw-bold:                700;

  --lh-tight:               1.1;
  --lh-snug:                1.3;
  --lh-normal:              1.65;
  --lh-relaxed:             1.8;

  --ls-tight:               -0.03em;
  --ls-normal:              0;
  --ls-wide:                0.08em;
  --ls-wider:               0.14em;

  /* ── Spacing ── */
  --space-xs:               0.25rem;
  --space-sm:               0.5rem;
  --space-md:               1rem;
  --space-lg:               1.5rem;
  --space-xl:               2rem;
  --space-2xl:              2.5rem;
  --space-3xl:              4rem;
  --space-4xl:              5rem;
  --space-5xl:              8rem;
  --space-section:          clamp(5rem, 12vw, 10rem);

  /* ── Layout ── */
  --max-width:              1200px;
  --max-width-narrow:       800px;
  --max-width-text:         640px;
  --gutter:                 clamp(1.5rem, 5vw, 3rem);

  /* ── Borders & Radius ── */
  --radius-sm:              4px;
  --radius-md:              8px;
  --radius-lg:              12px;
  --radius-xl:              16px;
  --radius-full:            9999px;

  /* ── Shadows ── */
  --shadow-sm:              0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:              0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg:              0 12px 40px rgba(0, 0, 0, 0.4);
  --shadow-accent:          0 8px 24px rgba(196, 113, 74, 0.25);

  /* ── Transitions ── */
  --ease-spring:            cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:            cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:          150ms;
  --duration-normal:        350ms;
  --duration-slow:          500ms;
  --duration-reveal:        800ms;

  /* ── Z-Index ── */
  --z-base:                 1;
  --z-dropdown:             100;
  --z-sticky:               200;
  --z-overlay:              300;
  --z-modal:                400;
  --z-nav:                  500;
}