/* Amaranth SC design tokens: Studio.
   Warm ink and bone, like the black and white photographs on amaranthsc.com, with one accent taken from the name:
   amaranth, a deep red that never fades. The accent is used sparingly: rules, focus, the bloom, small labels.
   Contrast figures are WCAG ratios against --ink unless noted. Full table in DESIGN.md. */
@font-face { font-family: "Anton"; src: url("../fonts/Anton.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-Italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --ink: #0c0a0b;
  --ink-2: #151213;
  --ink-3: #1f1a1c;
  --line: rgba(241, 236, 228, .12);
  --line-2: rgba(241, 236, 228, .22);
  --chalk: #f1ece4;          /* bone, body text on ink: 16.8:1 */
  --chalk-2: #cfc7bd;        /* secondary text: 11.8:1 */
  --chalk-3: #a59c93;        /* tertiary text: 7.3:1 on ink, 6.4:1 on ink-3 */
  --signal: #c8174f;         /* amaranth: white text on it 5.7:1; as a mark on ink 3.5:1 */
  --signal-deep: #8f0e38;    /* pressed and hover: white text on it 9.2:1 */
  --signal-hi: #ff6f97;      /* amaranth as text on ink: 7.5:1 */
  --signal-wash: rgba(200, 23, 79, .18);
  --clay: #e8743b;           /* heat: live, injury, overdue: 6.6:1 */
  --clay-wash: rgba(232, 116, 59, .14);
  --go: #4fd39a;             /* 10.4:1 */
  --go-wash: rgba(79, 211, 154, .13);
  --steady: #f0c14b;         /* 11.7:1 */
  --steady-wash: rgba(240, 193, 75, .13);

  /* Light sections on the public site */
  --bone: #f1ece4;
  --bone-2: #e7e0d5;
  --bone-line: rgba(12, 10, 11, .14);
  --on-bone-2: #5a524c;      /* secondary text on bone: 6.5:1 */
  --signal-on-bone: #a3123f; /* amaranth as text on bone: 6.6:1 */

  --f-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --f-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --step--1: clamp(.8rem, .78rem + .1vw, .86rem);
  --step-0: clamp(1rem, .97rem + .15vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + .9vw, 2rem);
  --step-3: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --step-4: clamp(2.6rem, 1.9rem + 3.6vw, 5rem);

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
  --r: 2px;
  --r-2: 4px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-gun: cubic-bezier(.76, 0, .24, 1);   /* kept name: the platform's in-out curve */
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--chalk); font: 400 var(--step-0)/1.55 var(--f-body); font-kerning: normal; font-feature-settings: "calt" 0, "cv11" 1; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }
::selection { background: var(--signal); color: #fff; }
:focus-visible { outline: 2px solid var(--signal-hi); outline-offset: 3px; border-radius: 1px; }
input, textarea { caret-color: var(--signal-hi); }
html { scrollbar-color: #3a3336 var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #3a3336; border-radius: 10px; border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--signal); }
.num, td.num, .tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); font-size: .78em; letter-spacing: .06em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 999; background: var(--signal); color: #fff; padding: var(--s-2) var(--s-4); }
.skip:focus { top: var(--s-4); }

/* ------------------------------------------------------------------ readability
   Prefixed with html so these win over component styles in site.css, app.css and area files regardless of load order.
   Small text is never below about 14px, labels are never the faint tone, and body copy sits a touch heavier. */
html body { font-weight: 400; line-height: 1.6; }
html .mono { font-size: .78rem; letter-spacing: .08em; }
html .faint, html .opt { color: var(--chalk-2); }
html .muted { color: var(--chalk-2); }
html .hint, html .fhint, html .fine { font-size: .95rem; color: var(--chalk-2); line-height: 1.5; }
html .ferr, html .err { font-size: .95rem; font-weight: 550; }

/* App screens */
html table.data th { font-size: .74rem; color: var(--chalk-2); }
html .stat dt { font-size: .9rem; color: var(--chalk-2); }
html .list .meta, html .small { font-size: .92rem; }
html .badge { font-size: .8rem; }
html .chart .axis { fill: var(--chalk-2); }