/* Leakplate v2 — tokens (light, the default)
 *
 * Step 4 of the `web-design-system` skill: "put the same values into the code: CSS variables,
 * the Tailwind theme or the project's tokens, so pages use names, never raw values."
 * This file is that half. DESIGN.md decides; this is written once and nobody types a hex again.
 *
 * Copy to `sites/leakplate/styles/tokens.css` and link it before any other stylesheet.
 * Link `tokens-dark.css` immediately after it. If a value here disagrees with DESIGN.md,
 * DESIGN.md wins and this file is wrong.
 *
 *   node bin/contrast.mjs design/leakplate-v2/tokens.css
 *   node bin/contrast.mjs design/leakplate-v2/tokens-dark.css
 *
 * Why two files: `contrast.mjs` builds one flat token map and the last definition of a name wins.
 * A `prefers-color-scheme` block inside this file would silently overwrite every light value and
 * the checker would then measure the dark palette against the light claims — it did, on the first
 * draft, and reported 16.96:1 for a pair that is never rendered. The dark values live in their own
 * file so both palettes are measured against their own claims.
 *
 * The world: a technical plate read in a cold room. Light ground, graphite ink, one ice cyan that
 * means "a value that was measured" and nothing else. Lotstep v2 is dark petrol + amber; this is
 * its opposite on purpose.
 */

:root {
  color-scheme: light dark;

  /* ------------------------------------------------------------ Ground — frost, the plate face */
  --frost-050: #F2F6F7; /* page ground. cold near-white, visibly blue-green, never #fff */
  --frost-100: #E7EDEF; /* the plate: hero panel, record rows, form field */
  --frost-200: #D5DEE1; /* blueprint grid majors, section rules, plate edge */
  --frost-300: #B9C6CB; /* DECORATIVE hairlines and grid minors only. carries no meaning */

  /* ------------------------------------------------------------- Graphite — ink and structure */
  --graphite-900: #0F1619; /* display headings, the CTA fill, the dark band ground */
  --graphite-700: #28333A; /* body text, filled record values */
  --graphite-500: #4C5B63; /* captions, field labels, citation chips */
  --graphite-400: #67767E; /* the idle gauge arc and empty record slots. NON-TEXT only */

  /* -------------------------------------- Measure — one hue, one job: a value that was measured */
  --ice-700: #0A5A6B; /* the leak-rate readout and any accent TEXT at body size */
  --ice-500: #0D6E85; /* link text, focus ring */
  --ice-400: #1286A3; /* NON-TEXT: the live gauge arc, threshold tick, chart marks on frost */
  --ice-150: #9EDCEB; /* NON-TEXT and readout inside the dark band only */

  /* ---- Chart ramp — ordinal, one hue, for the rule's three lines: 10 / 20 / 30 percent (§6) */
  /* node scripts/validate_palette.js "#55A6C0,#1286A3,#0A5A6B" --ordinal --mode light --surface "#E7EDEF"
     → ALL CHECKS PASS (monotone L, ΔL gaps >= 0.06, light end 2.34:1 vs surface, hue spread 4°) */
  --ice-ramp-1: #55A6C0; /* 10 percent */
  --ice-ramp-2: #1286A3; /* 20 percent */
  --ice-ramp-3: #0A5A6B; /* 30 percent */

  /* --------------------------- Dark band — the one inverted section of the light page (§5 of DESIGN.md) */
  --vault-900: #0B1114; /* the dark band ground */
  --vault-800: #141D22; /* raised surfaces inside the dark band */
  --vault-700: #1F2B31; /* hairlines and grid inside the dark band */
  --steam-050: #EDF3F4; /* text on --vault-900 */
  --steam-300: #A8B9C0; /* captions on --vault-900 */

  /* @contrast graphite-900 on frost-050 >= 4.5  display headings
   * @contrast graphite-700 on frost-050 >= 4.5  body text and record values
   * @contrast graphite-500 on frost-050 >= 4.5  captions, field labels, citation chips
   * @contrast graphite-700 on frost-100 >= 4.5  values on the plate face
   * @contrast graphite-500 on frost-100 >= 4.5  labels on the plate face
   * @contrast ice-700 on frost-050 >= 4.5       the leak-rate readout
   * @contrast ice-700 on frost-100 >= 4.5       the leak-rate readout on the plate
   * @contrast ice-500 on frost-050 >= 4.5       links and focus ring
   * @contrast ice-500 on frost-100 >= 4.5       links on the plate
   * @contrast ice-400 on frost-050 >= 3         NON-TEXT: live arc, threshold tick, chart marks
   * @contrast ice-400 on frost-100 >= 3         the same marks on the plate face
   * @contrast ice-400 on frost-050 < 4.5        that is why --ice-400 never carries text: use --ice-700
   * @contrast graphite-400 on frost-050 >= 3    NON-TEXT: idle arc and empty record slots
   * @contrast graphite-400 on frost-100 >= 3    the same, on the plate face
   * @contrast frost-050 on graphite-900 >= 4.5  the CTA label on its fill
   * @contrast steam-050 on vault-900 >= 4.5     text in the dark band
   * @contrast steam-300 on vault-900 >= 4.5     captions in the dark band
   * @contrast ice-150 on vault-900 >= 4.5       the readout in the dark band
   * @contrast frost-300 on frost-050 < 3        decorative on purpose: a grid minor that reached 3
   *                                             would compete with the idle arc for meaning
   */

  /* -------------------------------------------------------------------------------- Typography */
  --font-display: 'Space Grotesk Variable', system-ui, sans-serif; /* display + text, self-hosted, OFL */
  --font-data: 'IBM Plex Mono', ui-monospace, monospace;  /* EVERY numeral on the site, plus citations */

  --step-h1: clamp(2.5rem, 1.5rem + 3.6vw, 4.25rem);
  --step-h2: clamp(1.625rem, 1.15rem + 1.7vw, 2.5rem);
  --step-h3: 1.0625rem;
  --step-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --step-body: 1rem;
  --step-caption: 0.8125rem;
  --step-readout: clamp(2rem, 1.3rem + 2.4vw, 3rem); /* the gauge number, the only big numeral */
  --step-data: 0.8125rem;   /* record values and chart labels */
  --step-cite: 0.6875rem;   /* the engraved citation chip: 11px, its own size on purpose */

  --lh-h1: 0.98;  --tr-h1: -0.025em;
  --lh-h2: 1.08;  --tr-h2: -0.015em;
  --lh-h3: 1.3;   --tr-h3: 0em;
  --lh-lead: 1.5;
  --lh-body: 1.6;
  --lh-caption: 1.45;
  --lh-readout: 1;    --tr-readout: -0.02em;
  --lh-data: 1.35;    --tr-data: 0em;
  --lh-cite: 1.2;     --tr-cite: 0.06em;  /* stencil tracking. the only tracked-out type here */

  --measure-body: 60ch;
  --measure-lead: 46ch;
  --measure-caption: 44ch;

  /* --------------------------------------------------------------------------- Spacing (4px) */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;    --space-7: 3rem;    --space-8: 4rem;
  --space-9: 6rem;    --space-10: 8rem;
  --space-section: var(--space-10); /* 128px; drops to 4rem below 768px */

  /* ------------------------------------------------------------------ Shape, border, depth */
  --r-none: 0px;    /* the plate, its rows, the grid: a plate has square corners */
  --r-chip: 2px;    /* citation chips and gauge ticks only */
  --r-control: 4px; /* button, input, select. nothing else */
  --bw-hairline: 1px;
  --bw-plate: 2px;  /* the one heavier line: the plate edge and the threshold rule */
  /* shadows: none anywhere, with one exception. depth is the frost-050 / -100 / -200 step
     plus the 2px plate edge. --shadow-plate is used ONLY on the hero plate. */
  --shadow-plate: 0 1px 0 0 var(--frost-200), 0 24px 48px -32px rgb(15 22 25 / 0.28);

  /* -------------------------------------------------------------------------- Blueprint grid */
  --grid-minor: 8px;         /* graph-paper minor, --frost-300 at 45% */
  --grid-major: 64px;        /* graph-paper major, --frost-200 */
  --content-max: 1200px;
  --page-margin: 2rem;       /* 20px below 768px */
  --grid-cols: 12;           /* 6 between 768 and 1199px, 4 below */
  --grid-gutter: 1.5rem;

  /* -------------------------------------------------------------------------------- Motion */
  --ease-sweep: cubic-bezier(0.25, 0.8, 0.3, 1);  /* the needle and anything that measures */
  --ease-state: cubic-bezier(0.4, 0, 0.2, 1);     /* hover, focus, toggle */
  --dur-state: 140ms;    /* range 120–160ms */
  --dur-loop: 9000ms;    /* the hero video loop, end to end */
  --dur-sweep: 2200ms;   /* the needle climb inside the loop */
  --dur-row: 260ms;      /* one record row engraving itself */

  /* ----------------------------------------------------------------------------- Focus ring */
  --focus-color: var(--ice-500);
  --focus-width: 2px;
  --focus-offset: 2px;
}

/* The focus ring is never removed, on any interactive element (DESIGN.md §2). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

/* Every numeral on this site is set in the data face (DESIGN.md §3). */
:where(.readout, .data, .cite, td, th, time) {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

/* DESIGN.md §7: under reduce, the hero video is replaced by its poster and nothing else moves. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-loop: 0ms; --dur-sweep: 0ms; --dur-row: 0ms; --dur-state: 0ms; }
}