/* ==========================================================================
   tokens.css — single source of truth
   Every colour, size, space and duration used anywhere on the site is
   declared here. No other stylesheet may hard-code a colour or a length
   other than structural zeroes and 100%/1fr-style layout keywords.
   ========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------
     Contrast ratios measured against --paper (#DFE3E4):
       --ink         13.60:1   body + headings              AA / AAA
       --ink-soft     5.00:1   secondary text, margin labels AA
       --signal       6.12:1   links, focus ring, active lang AA
       --rule         1.42:1   DECORATIVE separators only — never a border
                               that carries meaning (WCAG 1.4.11 exempt)
       --rule-strong  3.31:1   form field borders and other real UI bounds
     Do not use --rule where --rule-strong is required.
     ---------------------------------------------------------------------- */
  --paper:        #DFE3E4;
  --paper-raised: #EBEEEF;
  --ink:          #131A1E;
  --ink-soft:     #556065;
  --rule:         #B9C1C3;
  --rule-strong:  #727C7F;
  --signal:       #1F3BD6;

  /* --- Type families ----------------------------------------------------- */
  --font-display: "Bricolage Grotesque", "Bricolage Fallback", system-ui, sans-serif;
  --font-body:    "Public Sans", "Public Sans Fallback", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Type scale (fluid, clamp) -----------------------------------------
     Hero runs 38px @360 -> 76px @1180. Mono never drops below 12px: the
     margin labels are structural wayfinding, not decoration. */
  --step-hero:  clamp(2.375rem, 1.148rem + 5.45vw, 4.75rem);
  --step-h2:    clamp(1.75rem,  1.298rem + 2.01vw, 2.625rem);
  --step-h3:    clamp(1.125rem, 1.013rem + 0.50vw, 1.375rem);
  --step-lead:  clamp(1.0625rem, 0.965rem + 0.43vw, 1.25rem);
  --step-body:  1rem;
  --step-small: 0.9375rem;
  --step-mono:  0.75rem;   /* 12px floor — never smaller, at any width */

  --lh-display: 1.04;
  --lh-title:   1.18;
  --lh-body:    1.6;
  --lh-mono:    1.45;

  --track-hero:    -0.03em;
  --track-display: -0.02em;
  --track-body:     0em;
  --track-mono:     0.08em;

  --weight-body:    400;
  --weight-medium:  500;
  --weight-display: 700;
  --weight-hero:    800;

  /* --- Space scale (4 / 8 / 12 / 16 / 24 / 40 / 64 / 104) ----------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6.5rem;

  /* Vertical rhythm between top-level sections, fluid. */
  --space-section: clamp(2.5rem, 1.548rem + 4.23vw, 5rem);

  /* --- Layout ------------------------------------------------------------ */
  --margin-col: 140px;   /* the annotation column */
  --gutter:     2.5rem;
  --shell-max:  73.75rem; /* 1180px */
  --measure:    62ch;   /* prose */
  --measure-hero: 16ch;   /* the h1, which wants to break far earlier */
  --pad-inline: clamp(1.25rem, 0.679rem + 2.54vw, 2.5rem);

  /* Breakpoint at which the annotation column collapses. Kept here for
     reference — media queries cannot read custom properties. */
  --bp-margin-col: 900px;

  /* --- Borders and radii --------------------------------------------------
     A small radius throughout: this is a technical document, not a
     newspaper. Zero-radius everywhere reads as the wrong register. */
  --rule-w:     1px;
  --rule-w-thick: 2px;
  --radius:     3px;
  --radius-lg:  4px;

  /* --- Focus -------------------------------------------------------------- */
  --focus-w:      3px;
  --focus-offset: 2px;

  /* --- Touch targets ------------------------------------------------------ */
  --target-min: 44px;

  /* --- Motion --------------------------------------------------------------
     One sequence, on load. Content in, then the margin labels 150ms later.
     Nothing scroll-triggered. All of it off under prefers-reduced-motion. */
  --dur-enter:     420ms;
  --dur-step:      200ms;
  --dur-quick:     120ms;
  --delay-labels:  150ms;
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0, 0, 0.2, 1);
  --enter-shift: 8px;
  --step-shift: 12px;
}