/* ==========================================================================
   Design tokens.

   Sourced from brand-guidelines.md. The palette has no categorical ramp by
   design: grey means "before", teal means "after", navy is structure, and
   charcoal is type. Teal appears only on figures, links and CTAs -- never as
   a dominant field.
   ========================================================================== */

:root {
  /* ---- palette ---- */
  --charcoal: #1A1C1E;        /* headlines, body text, the logo */
  --navy: #0F2438;            /* section grounds, headers, dividers */
  --teal: #0E7C7B;            /* metrics, links, CTAs -- sparingly */
  --teal-deep: #0A5F5E;       /* teal on hover */
  --teal-lit: #17A3A1;        /* teal on dark grounds only */
  --paper: #F7F6F3;           /* page ground. Never pure white */
  --paper-2: #F1EFEA;         /* recessed panels */
  --card: #FFFFFF;            /* boxed figures sit on white to lift them */
  /* Captions, secondary text. Was #6B7280, which is 4.47:1 on --paper and
     4.21:1 on --paper-2: under the 4.5:1 WCAG AA floor, at the smallest sizes
     on the site, on the text that carries the evidence -- chart sources,
     method notes, form help, the "before" column of every results table.
     #5F6772 is 5.16:1 and 4.86:1 and reads the same weight. */
  --gray: #5F6772;
  --ink-soft: #3B4046;        /* body copy inside panels */
  --ink-mid: #2E3338;         /* lead paragraphs */

  /* "before" in every chart. Warm, so it reads as related to the paper. */
  --before: #C9C6BE;

  /* ---- rules ---- */
  --rule: rgba(15, 36, 56, .16);
  --rule-soft: rgba(15, 36, 56, .09);
  --rule-dark: rgba(247, 246, 243, .13);

  /* ---- type ---- */
  --font-sans: Inter, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  /* Client quotes only -- the single deliberate contrast point in the system. */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --step--1: 13px;
  --step-0: 16px;
  --step-1: clamp(16px, 1.5vw, 18.5px);
  --step-2: clamp(19px, 1.7vw, 23px);
  --step-3: clamp(24px, 2.7vw, 36px);
  --step-4: clamp(29px, 4.15vw, 55px);

  --label: 10.5px;            /* the letterspaced uppercase micro-label */

  /* ---- space ---- */
  --shell: 1320px;
  --pad: clamp(18px, 4vw, 56px);
  --sec-y: clamp(36px, 4.4vw, 62px);
  --gap-rail: clamp(20px, 3vw, 48px);
  --rail: 190px;              /* the numbered section's left rail */
  /* The sticky header's height, so anything that sticks beneath it or scrolls
     to an anchor under it can use the same number. Measured, and the header
     is given it as a min-height so it cannot drift. */
  --header-h: 68px;
}