/* Design tokens: every color, and every named value built from one, defined
   once for the whole site. Every page loads this file first; scripts read it
   through /wd.js (WD.token). Names and meanings: the Operator's Manual (/hq/brand/)
   and BRAIN/websterdivision/02-design-system.md.

   Each color is written exactly once, as hex. Transparent versions are mixed
   from it (color-mix(... transparent)), never copied as RGB numbers, so
   changing a color here changes every use of it.

   Deliberately not from here: <meta name="theme-color"> (meta tags can't use
   variables), the welcome email in HQ's invite tool (Gmail ignores them) and
   the downloadable hq/brand/elements/elements.css (self-contained; its copies
   are checked). tools/check-tokens.js fails if a value from this file is
   written out anywhere else. */
:root {
  /* ---- The palette ---- */
  --night: #0b0b0b; /* backgrounds, and panels: no lighter or darker boxes */
  --ice: #f4f4f2; /* type, linework, the logo */
  --red: #e3242b; /* Signal Red: accents, one highlight per view */
  --steel: #b0b2b6; /* secondary text */
  --paper: #ffffff; /* the rare light surface; white text on red */
  --graphite: #2a2b2f; /* text on Paper, dark-gray grounds */

  /* ---- Roles: what pages use. Each points at a palette color; pages never
     name the palette directly, so "secondary text should be lighter" is one
     change here, and print remaps these (site.css @media print). ---- */
  --surface: var(--night); /* page and panel backgrounds */
  --ink: var(--ice); /* main text, linework, ticks */
  --ink-muted: var(--steel); /* secondary text: labels, captions, metadata */
  --ink-placeholder: color-mix(in srgb, var(--steel) 70%, transparent); /* hint text in an empty field (base.css) */
  --accent: var(--red); /* the one highlight: buttons, rules, active states, large red type */
  --accent-text: color-mix(in srgb, var(--red) 92%, var(--ice)); /* small red text (eyebrows, codes, statuses, labels): Signal Red with 8% Ice, so it passes 4.5:1 on Night; looks the same */
  --on-accent: var(--paper); /* text on Signal Red (buttons, selected text) */
  --surface-paper: var(--paper); /* the rare light surface: the notice box */
  --ink-on-paper: var(--graphite); /* text on it */

  /* ---- Lines: always Ice at low opacity, never a new gray ---- */
  --line: color-mix(in srgb, var(--ice) 12%, transparent); /* hairline: row separators, panel borders, dividers */
  --line-faint: color-mix(in srgb, var(--ice) 8%, transparent); /* dense rows: scoreboard, search results */
  --line-strong: color-mix(in srgb, var(--ice) 35%, transparent); /* the rule under table and column headings */
  --line-soft: color-mix(in srgb, var(--ice) 20%, transparent); /* outlines of buttons, toggle groups and floating boxes; kept soft so a selected button (full Ice) stands out */
  --line-field: color-mix(in srgb, var(--ice) 40%, transparent); /* the edge of anything you type into or tick: often its only outline, so it meets 3:1 */
  --hatch: color-mix(in srgb, var(--ice) 55%, transparent); /* the hatch band's slashes */
  --tint: color-mix(in srgb, var(--ice) 6%, transparent); /* the hover hatch's stripes behind a hovered row */
  /* The diagonal hatch, the brand's 45-degree motif: 2px stripes every 9px. */
  --hatch-band: repeating-linear-gradient(135deg, transparent 0 7px, var(--hatch) 7px 9px); /* the band top right of every header */
  --hatch-hover: repeating-linear-gradient(135deg, transparent 0 7px, var(--tint) 7px 9px); /* behind a hovered row */
  --scrim: color-mix(in srgb, var(--night) 80%, transparent); /* dims the page behind a popup: the contact box, HQ search */
  /* The checkerboard that means "see-through here" (export previews):
     Night and a step lighter, in 16px squares. */
  --checker: repeating-conic-gradient(color-mix(in srgb, var(--ice) 7%, var(--night)) 0 25%, var(--night) 0 50%) 0 0 / 16px 16px;

  /* ---- Type: one face (fonts.css), six sizes plus the wordmark, nothing in
     between. Need emphasis? Change weight or color, never add a size. Each
     is a whole pixel (in rem, so a visitor's text-size setting still
     scales them) measured on a 1x screen to draw every capital and digit the
     same height, in regular and bold: Bender draws some letters a pixel tall
     or short at many sizes (12, 13, 15, 16, 19, 22px...) and, in bold, at
     more (17, 20, 23, 24px...). Title is clean in regular only: never bold.
     Measured 2026-10-22. Steps grow about 1.25-1.4x each. ---- */
  --text-display: clamp(2rem, 7.5vw, 6.5rem); /* 32-104px: the wordmark, HQ view titles (fluid; at this size the quirk doesn't show) */
  --text-title: 1.875rem; /* 30px: a tool's or document's title, type specimens. Regular weight only */
  --text-large: 1.5625rem; /* 25px: big single lines: brand guide headings, the search box, big numbers */
  --text-heading: 1.125rem; /* 18px: panel headings, HQ's directory names */
  --text-label: 0.875rem; /* 14px: text: paragraphs, table entries, links, buttons, captions, statuses */
  --text-micro: 0.6875rem; /* 11px: footer, column headings, small labels */

  /* ---- Tracking (letter-spacing): six steps, by job. Uppercase labels are
     spaced out; the smaller and more label-like, the wider. Paragraphs in
     normal case use none. ---- */
  --track-tight: 0.04em; /* big type (Title, Large), text typed into fields */
  --track-entry: 0.06em; /* table entries, values, data */
  --track-label: 0.12em; /* captions, codes, small mixed labels */
  --track-caps: 0.16em; /* column headings, buttons, statuses, nav */
  --track-wide: 0.2em; /* links, section labels, tool heads */
  --track-eyebrow: 0.32em; /* eyebrows: the red line over a title */

  /* ---- Line height: four steps ---- */
  --leading-none: 1; /* one line of big type, numbers, icons */
  --leading-tight: 1.05; /* titles that may wrap */
  --leading-body: 1.5; /* text, labels that wrap */
  --leading-loose: 1.6; /* long reading, monospace samples */

  /* ---- Fades: an element dimmed as a whole (opacity). Dim text uses a
     color role instead (--ink-muted, --ink-placeholder). ---- */
  --fade-quiet: 0.6; /* small marks that should recede: separators, idle lights */
  --fade-disabled: 0.4; /* unavailable: a disabled button, an empty row */

  /* ---- Strokes: lines are 1px (written as 1px); two heavier weights ---- */
  --stroke-heavy: 1.5px; /* a box drawn on Paper or in print */
  --rule: 2px; /* red rules and underlines, active tabs, ticks on a bordered panel */
  --tick: 16px; /* corner-tick arms: figures, tables, panels */
  --tick-small: 8px; /* corner ticks on small cards in a grid */

  /* ---- Widths: how wide content gets ---- */
  --measure: 68ch; /* a comfortable line of reading text */
  --width-xs: 480px; /* small boxes: the contact box, the demo notice */
  --width-sm: 640px; /* popups: HQ search */
  --width-md: 760px; /* single tables and diagrams: Table 1, the 404 rink */
  --width-lg: 880px; /* HQ section tables */
  --width-xl: 1120px; /* HQ pages: the directory, admin, the proof sheet */
  --width-2xl: 1200px; /* the widest content: the homepage stage */
  --width-letter: 816px; /* a US Letter page (8.5in) on screen: HQ's documents; with --space-24 (1in) margins its text column is 624px */

  /* ---- Motion: the site's one easing curve (fast start, long settle) for
     entrances, power-ons and glides ---- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Transition lengths, by job. (Animations, like the entrances and the CRT
     effect, are choreography timed as a whole and keep their own.) */
  --dur-fast: 0.15s; /* instant feedback: a button press, a row highlight */
  --dur-fade: 0.2s; /* color, border and opacity changes: most hovers */
  --dur-move: 0.35s; /* anything that moves or resizes; always with --ease-out */

  /* ---- Breakpoints: the only window widths layouts change at, as
     @media (max-width: …) (that width and narrower). CSS can't use variables
     inside @media, so pages write the number; these are the list the token
     check allows, and what scripts read (WD.token('bp-xl')). ---- */
  --bp-xs: 520px; /* small phones: the tightest layouts */
  --bp-sm: 600px; /* phones: footers and tables stack */
  --bp-md: 760px; /* two columns become one */
  --bp-lg: 900px; /* tablets: side panels move under */
  --bp-xl: 1100px; /* narrow laptops: wide layouts (Fig. 1, the HQ tools) stack */
  --bp-2xl: 1240px; /* room for a Letter page centered on the window, past HQ's directory (HQ documents) */
  --bp-3xl: 1680px; /* ...and a rail each side of it (220px each) */

  /* ---- Space: every padding, margin and gap is a step on a 4px grid,
     named by how many 4s (--space-3 = 12px). Bigger gaps take bigger steps.
     1px is left as is where it lines up borders (two buttons sharing one). ---- */
  --space-half: 2px; /* nudges */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --gutter: var(--space-4); /* the smallest page margin (phones) */

  /* ---- The camo field's dots (field.js), and characters drawn in their place ---- */
  --dot: #ecebe6;

  /* ---- Print: black on white (site.css @media print, the rink's print drawing) ---- */
  --print-ink: #111111;
  --print-paper: #ffffff;
  --print-muted: #5a5c62;
  --print-rule: #c9cacd;
}