/* =====================================================================================
   TYPE ROLES (design-system pass, 2026-10-12). Every text on the landing page takes one role.
   Two faces only. One display weight for the whole page.

   role      face          weight  size token          use
   display   Turret Road   700     --hl-poster (hero)  the hero headline, the one poster moment
   section   Turret Road   700     --w-section         every section head, two-tone: ink + .soft (--muted-2)
   figure    Turret Road   700     --w-figure          big numbers only
   title     Manrope       600     --w-title           step, feature, stat and FAQ titles
   lead      Manrope       400     --w-lead            the description under a title, hero subtitle (max 60ch)
   body      Manrope       400     --w-body            FAQ answers, running text
   meta      Manrope       600     --w-meta            step counters, figure units, conditions lines, works-with row
   micro     Manrope       600     --w-micro           tracked caps labels (.micro), the film cue
   action    Manrope       600     16px (hero scales)  every button and text link

   SPACE (same pass). One scale; sections use the semantic gaps below, never raw values.
   4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 / 160
   ===================================================================================== */
/* Shared design tokens. Supervisor-owned: request changes, don't fork values. */
:root {
  /* Monochrome palette */
  --paper: #ffffff;
  --white: #ffffff;
  --ink: #191919;
  --ink-2: #333333;
  --muted: #626262;        /* body-secondary text, 5.9:1 on paper */
  --muted-2: #8a8a8a;      /* decorative micro-labels only */
  --line: #dedede;         /* hairline grid */
  --line-strong: #c9c9c9;
  --tile: #efefef;         /* split-flap tile face */
  --tile-2: #f4f4f4;
  --signal: #16845e;       /* the only colour: verification ticks and monitoring dot */

  /* Type */
  --font-display: 'Turret Road', Arial, sans-serif;
  --font-body: 'Manrope', Arial, sans-serif;
  --font-mono: Consolas, 'Courier New', monospace;

  /* Motion */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-snap: cubic-bezier(.2, .9, .1, 1);
  --dur-fast: .16s;
  --dur: .3s;
  --dur-slow: .6s;

  /* Split-flap (Figma spec: fixed 60 x 75, 10px horizontal padding) */
  --flap-w: 60px;
  --flap-h: 75px;
  --flap-pad: 10px;
  --flap-gap: 8px;

  /* Grid */
  --center-max: 800px;
  --r-sm: 10px;            /* small radius (cards); was only defined in sec-numbers.css */
  --page-max: 1440px;
  --gutter: clamp(16px, 3vw, 40px);

  /* Layers */
  --z-scene: 1;
  --z-pills: 4;
  --z-header: 20;
  --z-dialog: 100;
}

/* Shared caution (amber) for "Can't confirm" states, beside words only. Mirrors packages/ui and research.css. Added by the planner 2026-10-12. */
:root { --caution: #9a5b00; --caution-ink: #7a4a00; }

/* Web type scale (planner, 2026-10-12). One calm ramp for every section below the hero, so no
   section shouts louder than another. Hero headline keeps its own poster size. */
:root {
  --w-section: clamp(34px, 3.5vw, 54px);   /* section heads (two-tone) */
  --w-title:   clamp(19px, 1.4vw, 22px);   /* feature / step / stat / FAQ titles */
  --w-lead:    clamp(16px, 1.1vw, 17px);   /* descriptions under a title */
  --w-body:    16px;                       /* FAQ answers, running text */
  --w-meta:    13px;                       /* counters, units, conditions, works-with row */
  --w-micro:   11px;                       /* tracked caps labels */
  --w-figure:  clamp(40px, 3.6vw, 56px);   /* big numbers */

  --fw-display: 700;                       /* hero, section heads, figures: one weight */
  --fw-title: 600;
  --lh-section: 1.1;
  --ls-display: -.01em;
  --measure: 60ch;                         /* max line length for descriptions */
}

/* Space scale + semantic gaps (design-system pass, 2026-10-12). */
:root {
  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-24: 24px; --sp-32: 32px;
  --sp-48: 48px; --sp-64: 64px; --sp-96: 96px; --sp-128: 128px; --sp-160: 160px;

  --gap-line: var(--sp-4);                                   /* two lines of one description */
  --gap-title: var(--sp-12);                                 /* title to its description */
  --gap-items: clamp(var(--sp-24), 3.4svh, var(--sp-48));    /* between items in a list */
  --gap-head: clamp(var(--sp-48), 7svh, var(--sp-96));      /* section head to its content (design pass 10-21: was 40px..96 at 6svh) */
  --gap-after: clamp(var(--sp-32), 5.5svh, var(--sp-64));   /* content to a trailing link or row */
  --sec-pad-y: clamp(var(--sp-96), 12svh, var(--sp-160));   /* section padding, top and bottom (design pass 10-21: was 64..128 at 8svh) */
  --sec-inset: clamp(var(--sp-8), 2.6vw, var(--sp-48));      /* content inset from the rails */
  --sec-h: calc(85svh - var(--l-topbar-h, 56px));            /* one screen, the next section peeks ~15% */

  /* Section entrance (js/reveal.js) */
  --rv-rise: 14px;
  --rv-dur: var(--dur-slow);
  --rv-step: 70ms;
}