:root {
  --bg-base: #0c0c0d;
  --bg-surface: #131314;
  --bg-raised: #1a1a1c;
  --bg-overlay: rgba(12, 12, 13, 0.92);

  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);

  --text-primary: #f0ede8;
  --text-secondary: #9d9994;
  --text-muted: #8b8780;

  --accent: #d93545;
  /* small accent type (≤18px) needs ≥4.5:1 on the dark surfaces;
     #d93545 only manages 3.8–4.3:1, so text sizes use this lighter step */
  --accent-text: #e8505e;
  --accent-deep: #a8252f;
  --accent-dim: rgba(217, 53, 69, 0.12);
  --accent-glow: rgba(217, 53, 69, 0.28);

  --font-display: 'Bodoni Moda', 'Bodoni 72', Didot, 'Times New Roman', serif;
  --font-ui: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;

  --text-hero: clamp(3rem, 7vw, 6rem);
  --text-display: clamp(2rem, 4vw, 3.5rem);
  --text-title: clamp(1.2rem, 2vw, 1.6rem);
  --text-body: 1rem;
  --text-small: 0.9375rem;
  --text-micro: 0.8125rem;

  --space-section: clamp(5rem, 10vw, 10rem);
  --space-gutter: clamp(1.25rem, 5vw, 5rem);

  /* semantic stacking order — sticky nav sits below the mobile-nav overlay,
     which sits below the project modal. Local layers (hero/feat/credits use
     0–2 within their own stacking contexts) stay out of this cross-page scale. */
  --z-nav: 100;
  --z-mobile-nav: 150;
  --z-modal: 200;

  --ease-cinematic: cubic-bezier(0.25, 0.1, 0.0, 1.0);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast: 200ms;
  --duration-mid: 400ms;
  --duration-slow: 700ms;
}