/*
 * Design tokens. The first stylesheet on landing.html, index.html and single.html, and the only
 * file in this project that writes a colour out.
 *
 * The three pages used to carry three independent copies of the design: index.html declared 14
 * custom properties in its inline <style>, css/single.css declared 12 different ones, and
 * landing.html declared none and spelled everything as a literal. Between them they used 78 + 24 +
 * 10 distinct hex values, nine corner radii and fifteen shadows, so "the green button" was three
 * different greens depending on which screen you were looking at, and a shared component like
 * css/toast.css could ask for var(--neutral) and silently get nothing on the page that never
 * declared it.
 *
 * Three of the old fills also failed WCAG AA behind white text -- #10b981 at 2.54:1, #f59e0b at
 * 2.15:1, #ef4444 at 3.76:1 against a 4.5:1 threshold. The values below are the corrected ones:
 * white on --success is 5.48:1, on --danger 4.83:1, on --warning 5.02:1, and on every *-hover
 * shade more than that. The greys went the same way: #999 was 2.85:1 and #888 3.54:1 on white,
 * against 3.22:1 for --border-strong (a boundary, which needs 3:1) and 6.54:1 for --text-3.
 * A colour used as text on a light background is a different value from the same colour used as a
 * fill behind white, which is what the --*-fg names are for: --success-fg reads 5.02:1 on white
 * and 4.76:1 on --success-bg, and is the only green that may be set as a text colour.
 *
 * Font sizes are absolute px on purpose. single.css used to set html { font-size: 20px } and size
 * everything in rem, so the same control was 20% larger there than on Load Test; a shared scale
 * that a page can rescale from underneath is not a shared scale.
 */

/*
 * Inter, served from the jar rather than fonts.googleapis.com.
 *
 * --font-sans has always named Inter first, but the three pages fetched it from Google, so in the
 * closed network this emulator is deployed into the name resolved to nothing and every screen
 * fell through to whatever the machine happened to offer: Segoe UI on Windows, something else on
 * a Linux workstation. The token now names a face the product actually ships, and the product
 * looks the same on every machine that runs it, connected or not.
 *
 * One file, 47 KB: the latin subset of the variable font, which carries the whole 400-700 range
 * in a single woff2 -- byte for byte the file Google was already serving for all four weights the
 * pages asked for, so nothing about the rendering changes. That is the entire cost; four static
 * cuts would have been closer to 200 KB. All four weights are in use: 400 for body text, 500 on
 * buttons, 600 for headings, badges and table headers, 700 wherever <strong> or a heading
 * default lands.
 *
 * font-display: swap, because an emulator that draws nothing until a font arrives is worse than
 * one that redraws once. Licence in fonts/OFL.txt (SIL OFL 1.1), which the licence requires to
 * travel with the font.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
}

:root {
  --brand-900:#16294f; --brand-800:#1e3c72; --brand-700:#2a5298;
  --brand-100:#dbeafe; --brand-050:#f0f9ff;

  --surface-0:#ffffff; --surface-1:#f3f4f6; --surface-2:#eef0f3;
  --surface-3:#e6e9ef; --surface-4:#e6e8ec;

  --border:#d6dbe2; --border-strong:#8a9099; --border-focus:var(--brand-800);

  --text-1:#111827; --text-2:#4b5563; --text-3:#565e6b; --text-inverse:#ffffff;

  --success:#047857; --success-hover:#065f46; --success-fg:#15803d; --success-bg:#ecfdf5;
  --danger:#dc2626;  --danger-hover:#b91c1c;  --danger-fg:#991b1b;  --danger-bg:#fef2f2;
  --warning:#b45309; --warning-hover:#92400e; --warning-fg:#854d0e; --warning-bg:#fefce8;
  --neutral:#4b5563; --neutral-hover:#374151; --info-fg:#2563eb;

  --font-sans:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace;
  --fs-100:11px; --fs-200:12px; --fs-300:13px; --fs-400:15px; --fs-500:18px; --fs-600:24px;
  --lh-tight:1.25; --lh-ui:1.4; --lh-base:1.5;

  --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:10px;
  --sp-5:12px; --sp-6:16px; --sp-8:20px; --sp-10:24px;
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-pill:999px;

  --shadow-1:0 1px 3px rgba(0,0,0,.08);
  --shadow-2:0 4px 12px rgba(0,0,0,.15);
  --shadow-3:0 10px 40px rgba(0,0,0,.30);
  --dur-fast:.12s; --dur:.18s;
  --hit-min:24px; --control-h:32px;
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}
*:focus-visible { outline:2px solid var(--brand-800); outline-offset:2px; }