/* ============================================================
   Story of US - design tokens
   The ONLY :root block in the codebase. Never add another.
   Source of truth: docs/Graphics/storyofus_brand_guide.svg
   ============================================================ */

:root {
  /* --- Surfaces (light theme, locked site-wide) --- */
  --paper: #f7f3ec;          /* body background, brand "warm paper" */
  --paper-raised: #fcfaf5;   /* cards, panels, inputs */
  --paper-deep: #efe8da;     /* alternate bands, wells */
  --ink-wash: rgba(27, 42, 74, 0.06); /* subtle structural tint */

  /* --- Text --- */
  --ink: #1b2a4a;            /* headings, primary text, structure */
  --ink-body: #3a465f;       /* body copy (navy-tinted, AA on paper) */
  --ink-muted: #5f5e5a;      /* metadata, captions */
  --on-ink: #f7f3ec;         /* text sitting on navy fills */
  --on-red: #ffffff;         /* text sitting on clay red fills */

  /* --- Accents --- */
  --red: #c8443a;            /* THE primary accent: CTAs, taglines, underlines */
  --red-deep: #a32d2d;       /* hover/pressed state of red only */
  --gold: #e8a33d;           /* secondary accent, highlights, sparingly */
  --sage: #3f6b5c;           /* tertiary accent, map/data states */
  --near-black: #0f0f0f;     /* rare, high-contrast moments only */
  --error: #a32d2d;          /* form validation */

  /* --- Dot-cluster palette (ONLY for the dot motif: cluster mark,
         map story dots, dot dividers, celebration. Never body text.) --- */
  --dot-1: #c8443a;
  --dot-2: #e8a33d;
  --dot-3: #3f6b5c;
  --dot-4: #8b5e3c;
  --dot-5: #d4733f;
  --dot-6: #5c7a6b;
  --dot-7: #a8542e;
  --dot-8: #b8895a;

  /* --- Lines & depth --- */
  --hairline: rgba(27, 42, 74, 0.14);
  --hairline-strong: rgba(27, 42, 74, 0.3);
  --shadow-soft: 0 10px 30px -12px rgba(27, 42, 74, 0.18);
  --shadow-lift: 0 24px 48px -20px rgba(27, 42, 74, 0.26);

  /* --- Typography --- */
  --font-display: "Fraunces", "Georgia", serif;
  --font-sans: "Public Sans", "Segoe UI", system-ui, sans-serif;

  /* --- Shape (one system: pills for interactive, 12px surfaces, 8px inputs) --- */
  --radius: 12px;
  --radius-input: 8px;
  --radius-pill: 999px;

  /* --- Layout --- */
  --content: 1200px;
  --content-narrow: 720px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --band-y: clamp(4.5rem, 10vh, 8rem);

  /* --- Z scale (never use arbitrary values) --- */
  --z-header: 50;
  --z-menu: 60;
  --z-transition: 70;
  --z-grain: 80;
  --z-skip: 100;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro: 200ms;    /* hovers, presses, focus */
  --dur-reveal: 750ms;   /* scroll reveals */
  --dur-scene: 1500ms;   /* hero acts, transitions between scenes */
}