/* ==========================================================================
   The Creative Dome — design tokens
   The single place to change brand colours, type and spacing.
   Every other stylesheet reads from here. Edit values, never hard-code.
   ========================================================================== */

:root {
  /* ---- Brand palette (carried over unchanged from the live site) ---- */
  --ink:          #090908;   /* page background */
  --charcoal:     #11110f;   /* raised surfaces */
  --cream:        #f1ede3;   /* body text on dark */
  --paper:        #faf7ef;   /* light surfaces */
  --gold:         #d89a12;   /* primary accent      8.11:1 on ink  AA */
  --bright-gold:  #f2b632;   /* focus + hover      10.92:1 on ink  AA */
  --white:        #fffdf7;
  --muted:        #c7c2b6;   /* secondary text     11.21:1 on ink  AA */
  --line:         #37342d;   /* hairline borders (decorative only) */
  --line-strong:  #6b6557;   /* borders that carry meaning (3:1) */

  /* ---- Type ---- */
  --font-display: Oswald, "Arial Narrow", Impact, sans-serif;
  --font-body:    Manrope, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-accent:  "Playfair Display", Georgia, serif;

  /* Fluid display sizes — clamp keeps them sane at 360px and 1440px */
  --step-label:   clamp(10px, 0.7vw + 8px, 12px);
  --step-body:    clamp(15px, 0.35vw + 14px, 18px);
  --step-lead:    clamp(18px, 0.8vw + 16px, 24px);
  --step-h3:      clamp(22px, 1.4vw + 18px, 32px);
  --step-h2:      clamp(34px, 5vw + 12px, 86px);
  --step-hero:    clamp(56px, 22vw, 260px);

  /* ---- Space ---- */
  --gutter:       clamp(18px, 3.5vw, 58px);
  --section-y:    clamp(72px, 9vw, 150px);
  --radius:       2px;

  /* ---- Motion ---- */
  --ease-out:     cubic-bezier(.22, .61, .36, 1);
  --ease-in-out:  cubic-bezier(.65, .05, .36, 1);
  --dur-fast:     160ms;
  --dur:          320ms;
  --dur-slow:     620ms;

  /* ---- Layout ---- */
  --header-h:     clamp(104px, 8vw, 104px);
  --max-w:        1440px;

  /* ---- Journey (read by JS; see journey.js) ---- */
  --perspective:  1000px;

  color-scheme: dark;
}

/* Users who ask for less motion get no journey animation at all.
   This flag is read by JavaScript as well as CSS. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0.01ms; --dur: 0.01ms; --dur-slow: 0.01ms; }
}