/* ==========================================================================
   DATUM — design tokens. Single source of truth.
   Generated from docs/design-tokens.json v4.0.0 (2026-09-07). Owner: art-director.
   v4: accent only — APWA survey pink (temporary survey markings) replaces v3 green
   for a portfolio reason. Ground and ink from v3 unchanged. --text-accent-display
   re-armed to a real deeper value. Guarantee band moves to ink with pink marks
   (section CSS). No semantic token renamed. See docs/art-direction.md "Revision v4".
   Section CSS references semantic tokens only. The --_ scales are private.
   Rendering-blocking on every page; nothing here waits on a section sheet.
   ========================================================================== */

:root {
  /* ---- private literal scales — never referenced outside this file ------- */
  --_paper-100: #FBFBFC;
  --_paper-200: #F4F5F6;
  --_paper-300: #E9EBED;
  --_paper-400: #DCDFE2;
  --_graphite-300: #A4A9AF;
  --_graphite-500: #656B72;
  --_graphite-600: #4A4F55;
  --_ink-700: #30343A;
  --_ink-800: #23262A;
  --_ink-900: #17191C;
  --_pink-400: #F25E92;    /* lifted for ink: 5.70:1 on ink-900, 4.92:1 on ink-800 */
  --_pink-500: #C4175A;    /* THE accent: APWA survey pink. 5.31:1 on paper-200 and under paper text */
  --_pink-600: #A8124C;    /* hover; display-scale accent on paper: 6.73:1 */
  --_pink-700: #8A0F3E;    /* active */

  /* ---- colour: surfaces --------------------------------------------------- */
  --surface-page: var(--_paper-200);
  --surface-raised: var(--_paper-100);
  --surface-sunken: var(--_paper-300);
  --surface-disabled: var(--_paper-400);
  --surface-ink: var(--_ink-900);
  --surface-ink-raised: var(--_ink-800);
  --surface-ink-hover: var(--_ink-700);
  --surface-accent: var(--_pink-500);         /* buttons only — never a band, card or section fill (marking discipline) */
  --surface-accent-hover: var(--_pink-600);
  --surface-accent-active: var(--_pink-700);
  --scrim: rgba(23, 25, 28, 0.6);

  /* ---- colour: the one accent (APWA survey pink) ----------------------------- */
  --accent: var(--_pink-500);
  --accent-hover: var(--_pink-600);
  --accent-active: var(--_pink-700);
  --accent-on-ink: var(--_pink-400);
  --accent-wash: rgba(196, 23, 90, 0.08);
  --accent-wash-strong: rgba(196, 23, 90, 0.18);

  /* ---- colour: text -------------------------------------------------------- */
  --text-primary: var(--_ink-900);
  --text-secondary: var(--_graphite-600);
  --text-muted: var(--_graphite-500);
  --text-accent: var(--_pink-500);
  --text-accent-display: var(--_pink-600);    /* accent glyphs at --text-display / --text-numeral on paper only */
  --text-on-ink: var(--_paper-200);
  --text-on-ink-secondary: var(--_graphite-300);
  --text-on-ink-accent: var(--_pink-400);
  --text-on-accent: var(--_paper-200);

  /* ---- colour: edges -------------------------------------------------------- */
  --edge-hairline: rgba(23, 25, 28, 0.14);
  --edge-strong: rgba(23, 25, 28, 0.32);
  --edge-grid: rgba(23, 25, 28, 0.07);
  --edge-plate: rgba(23, 25, 28, 0.22);
  --edge-on-ink: rgba(244, 245, 246, 0.16);
  --edge-on-ink-strong: rgba(244, 245, 246, 0.32);
  --edge-on-accent: rgba(244, 245, 246, 0.35);

  /* ---- type: families ------------------------------------------------------- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-data: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-stretch-display: 110%;
  --font-stretch-body: 100%;
  --font-numeric: tabular-nums;

  /* ---- type: scale (390px -> 1440px) ---------------------------------------- */
  --text-display: clamp(3.5rem, 2.1rem + 5.4vw, 6.75rem);   /* 56 -> 108px; 6.35:1 vs body */
  --text-numeral: clamp(5rem, 3rem + 9vw, 12rem);           /* 80 -> 192px */
  --text-h2: clamp(2.25rem, 1.4rem + 3vw, 4.25rem);         /* 36 -> 68px */
  --text-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);       /* 24 -> 34px */
  --text-h4: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);        /* 20 -> 24px */
  --text-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);     /* 18 -> 22px */
  --text-body: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);    /* 16 -> 17px */
  --text-small: 0.9375rem;                                  /* 15px */
  --text-data: 0.875rem;                                    /* 14px, DM Mono */
  --text-label: 0.75rem;                                    /* 12px, DM Mono caps */

  /* ---- type: weight ---------------------------------------------------------- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-display: 500;
  --weight-data: 400;
  --weight-data-strong: 500;
  --weight-data-light: 300;

  /* ---- type: line-height ------------------------------------------------------ */
  --lh-display: 0.95;
  --lh-numeral: 0.9;
  --lh-heading: 1;
  --lh-subheading: 1.1;
  --lh-tight: 1.2;
  --lh-lead: 1.4;
  --lh-body: 1.55;
  --lh-data: 1.4;
  --lh-label: 1;

  /* ---- type: tracking ---------------------------------------------------------- */
  --track-display: -0.03em;
  --track-numeral: -0.04em;
  --track-heading: -0.025em;
  --track-subheading: -0.015em;
  --track-tight: -0.01em;
  --track-body: 0;
  --track-label: 0.08em;

  /* ---- type: measure ------------------------------------------------------------ */
  --measure-body: 62ch;
  --measure-lead: 46ch;
  --measure-h2: 20ch;

  /* ---- space --------------------------------------------------------------------- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;
  --section-gap: clamp(64px, 8vw, 128px);
  --section-gap-tight: clamp(40px, 5vw, 80px);
  --block-gap: clamp(24px, 3vw, 48px);
  --stack-gap: 16px;

  /* ---- radius — four values, four roles ------------------------------------------ */
  --radius-plate: 0;        /* photographs, plates, tables, ledger rows, bands */
  --radius-control: 3px;    /* buttons, inputs, caption labels, accordion rows */
  --radius-card: 8px;       /* cards and panels on paper */
  --radius-pill: 999px;     /* pills, counters, status tags */

  /* ---- border ------------------------------------------------------------------- */
  --border-width-hair: 1px;
  --border-width-rule: 2px;
  --border-hairline: 1px solid var(--edge-hairline);
  --border-strong: 1px solid var(--edge-strong);
  --border-grid: 1px solid var(--edge-grid);
  --border-plate: 1px solid var(--edge-plate);
  --border-on-ink: 1px solid var(--edge-on-ink);
  --border-on-ink-strong: 1px solid var(--edge-on-ink-strong);
  --border-on-accent: 1px solid var(--edge-on-accent);
  --border-datum: 2px solid var(--accent);
  --border-datum-on-ink: 2px solid var(--accent-on-ink);
  --border-string: 1px solid var(--accent);
  --tick-length: 8px;
  --tick-length-sm: 6px;
  --string-knockout: 6px;

  /* ---- shadow — layered, light top-left 35deg ------------------------------------- */
  --shadow-plate:
    0 1px 1px rgba(23, 25, 28, 0.14),
    0 6px 14px -4px rgba(23, 25, 28, 0.22),
    0 28px 48px -20px rgba(23, 25, 28, 0.36);
  --shadow-plate-lift:
    0 1px 1px rgba(23, 25, 28, 0.14),
    0 8px 18px -4px rgba(23, 25, 28, 0.24),
    0 40px 64px -24px rgba(23, 25, 28, 0.42);
  --shadow-plate-on-ink:
    0 1px 1px rgba(0, 0, 0, 0.4),
    0 12px 24px -8px rgba(0, 0, 0, 0.5),
    0 40px 64px -24px rgba(0, 0, 0, 0.6);
  --shadow-plate-on-ink-lift:
    0 1px 1px rgba(0, 0, 0, 0.4),
    0 14px 28px -8px rgba(0, 0, 0, 0.55),
    0 56px 88px -28px rgba(0, 0, 0, 0.7);
  --shadow-card:
    0 1px 0 rgba(23, 25, 28, 0.08),
    0 10px 24px -14px rgba(23, 25, 28, 0.18);
  --shadow-card-lift:
    0 1px 0 rgba(23, 25, 28, 0.08),
    0 18px 36px -16px rgba(23, 25, 28, 0.26);
  --shadow-control: inset 0 -1px 0 rgba(23, 25, 28, 0.18);
  --shadow-control-on-accent: inset 0 -1px 0 rgba(0, 0, 0, 0.28);
  --shadow-focus: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--accent);
  --shadow-focus-on-ink: 0 0 0 2px var(--surface-ink), 0 0 0 4px var(--accent-on-ink);
  --shadow-focus-on-accent: 0 0 0 2px var(--surface-accent), 0 0 0 4px var(--text-on-accent);

  /* ---- easing — four curves, four purposes (mirror in src/js/motion.js) ----------- */
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);    /* entrances: tape locks, no overshoot  | expo.out     */
  --ease-slide: cubic-bezier(0.65, 0, 0.35, 1);    /* state moves between two rests       | power3.inOut */
  --ease-exit: cubic-bezier(0.55, 0, 1, 0.45);     /* exits, hover-out, always --dur-fast | power2.in    */
  --ease-draw: cubic-bezier(0.45, 0, 0.55, 1);     /* lines drawing, counters             | power1.inOut */

  /* ---- duration ------------------------------------------------------------------- */
  --dur-tick: 160ms;
  --dur-fast: 240ms;
  --dur-base: 420ms;
  --dur-slow: 600ms;
  --dur-scrub: 1000ms;   /* ScrollTrigger scrub smoothing only */

  /* ---- stagger --------------------------------------------------------------------- */
  --stagger-tight: 40ms;
  --stagger-base: 60ms;
  --stagger-loose: 80ms;

  /* ---- z-index ---------------------------------------------------------------------- */
  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-string: 20;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-grain: 400;
  --z-transition: 500;

  /* ---- breakpoints — informational; @media must use the literal px ------------------ */
  --bp-xs: 390px;
  --bp-sm: 640px;
  --bp-md: 900px;
  --bp-lg: 1200px;
  --bp-xl: 1440px;

  /* ---- layout ------------------------------------------------------------------------ */
  --container-max: 1440px;
  --container-pad: clamp(20px, 4.5vw, 72px);
  --grid-columns: 12;
  --grid-columns-md: 8;
  --grid-columns-sm: 4;
  --grid-gap: clamp(16px, 1.7vw, 24px);
  --header-h: 64px;
  --header-h-sm: 56px;
  --plate-overlap: 48px;
  --section-overlap: 96px;
  --offgrid-nudge: calc(-1 * var(--grid-gap));

  /* ---- material ------------------------------------------------------------------------ */
  --grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-tile: 240px;
  --grain-opacity: 0.06;
  --grain-opacity-ink: 0.09;
  --grain-blend: multiply;
  --grain-blend-ink: soft-light;
  --light-angle: 35deg;

  /* ---- plate — the bold move ------------------------------------------------------------ */
  --plate-mount: 6px;
  --plate-before-w-start: 58%;
  --plate-before-w-end: 30%;
  --plate-before-w-card: 34%;
  --plate-before-w-thumb: 40%;
  --delta: 1;                /* 0 = before covers the after; 1 = before pinned. JS scrubs it. */
  --hero-scrub: 60vh;
  --parallax-amp: 2%;

  /* ---- icon language --------------------------------------------------------------------- */
  --icon-size: 24px;
  --icon-size-sm: 16px;
  --icon-stroke: 1.5px;
  --icon-tick: 8px;
}

/* The hero scrub starts from the covered state only when JS is present and the
   viewport is desktop. No-JS, mobile and reduced-motion all rest at --delta: 1. */
@media (min-width: 900px) {
  html.js {
    --delta: 0;
  }
}

@media (max-width: 899px) {
  :root {
    --header-h: var(--header-h-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --delta: 1;
    --parallax-amp: 0%;
    --dur-tick: 0.01ms;
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
    --dur-scrub: 0.01ms;
    --stagger-tight: 0ms;
    --stagger-base: 0ms;
    --stagger-loose: 0ms;
  }
}