/* Pack Predictions — design tokens.
 *
 * The single declaration point for colour and type. Every page links this file
 * and no page redeclares any of it.
 *
 * The site is LIGHT-THEMED as of July 27, 2026. Token names are theme-neutral
 * on purpose: --surface and --ink describe a ROLE, so inverting the theme later
 * changes values in one place rather than forcing another rename. The previous
 * names (--graphite, --cream, --slate) described a dark theme and became
 * misleading the moment it inverted.
 *
 * BRAND-HANDOFF.md 1.1 is authoritative for the brand and semantic colours
 * below; its surface and text values are superseded by this file.
 *
 * No other colours may be introduced without a decision.
 */

:root{
  /* ---------- surfaces ---------- */
  --surface:   #FFFFFF;   /* page base */
  --surface-2: #F6F5F2;   /* panels, header bar */
  --surface-3: #EFEDE8;   /* raised fills, inactive track */
  --line:      #DEDCD6;   /* all borders and rules */

  /* THE WARM GROUND. White cards cannot read as objects on a white page, so a
   * surface that carries cards sits on this instead. /wolfwire proved the value
   * and the homepage strip repeated it as a hex literal; naming it here stops a
   * third copy and makes going site-wide a one-line change later.
   *
   * NOT applied to body anywhere yet, and deliberately so: ~196 `1px solid
   * var(--line)` rules across the site still draw bordered cards on white, and a
   * warm page under bordered cards looks broken rather than unfinished. Pages
   * opt in one at a time.
   *
   * ONLY --ink, --ink-2, --red, --brick and --brick-lt are safe as TEXT on this.
   * See the contrast note below. */
  --ground:    #F2F0EA;   /* pages and panels that carry cards */

  /* ---------- brand — carried over unchanged ---------- */
  --brick:     #A6402A;   /* structural accent, mark-adjacent. 6.20:1 on surface */
  --brick-lt:  #B0492F;   /* emphasis text. 5.47:1 on surface — passes AA body */

  /* ---------- semantic — usage rules below, these are not decorative ---------- */
  --red:       #CC0000;   /* NC State, and our own model's numbers. 5.89:1 */
  --steel:     #66707C;   /* opponents, and the FCS fallback. 5.03:1 — AA body */
  --amber:     #D99A2B;   /* NON-TEXT ONLY. 2.44:1 — see the amber rule below */

  /* ---------- text ---------- */
  --ink:       #111316;   /* primary text. 18.61:1 */
  --ink-2:     #4A5058;   /* secondary text. 8.14:1 */
  --ink-3:     #666C74;   /* captions, disabled, scale ticks. 5.30:1 white, 4.65:1 --ground */
}

/* CONTRAST — measured against --surface #FFFFFF, WCAG 2.1. All text tokens
 * pass AA body (4.5:1):
 *
 *   --ink     #111316  18.61:1     --brick    #A6402A   6.20:1
 *   --ink-2   #4A5058   8.14:1     --brick-lt #B0492F   5.47:1
 *   --ink-3   #666C74   5.30:1     --red      #CC0000   5.89:1
 *   --steel   #66707C   5.03:1
 *
 * AND AGAINST --ground #F2F0EA, which is darker and so a harder ground:
 *
 *   --ink     16.33:1    --brick     5.44:1    --ink-3   4.65:1
 *   --ink-2    7.14:1    --brick-lt  4.80:1    --red     5.17:1
 *
 * --ink-3 was darkened again on 2026-09-03, from #6B7179, which measured 4.32:1
 * on --ground and failed AA body there while passing on white. It now clears
 * both.
 *
 * ⚠ --steel #66707C IS NOT SAFE ON --ground: 4.42:1, below AA body. It passes on
 * white (5.03:1) and on --surface-2 (4.83:1), which is where every current use
 * sits. Darken it to #5E6874 (4.97:1 on ground, 5.66:1 on white) BEFORE putting
 * an opponent name or any other steel text on a warm surface.
 *
 * --steel and --ink-3 were darkened on 2026-07-27; they were 3.59:1 and 3.26:1,
 * which failed AA body on white. --steel was the one that mattered, because it
 * marks opponent names at body size and is the FCS fallback.
 *
 * THE AMBER RULE — --amber #D99A2B is NON-TEXT ONLY.
 *
 * It is 2.44:1 on white, failing AA body and AA large. Use it for rules, dots,
 * chart fills, borders and swatches. Never for text of any size. Darkening it
 * far enough to pass would push it to bronze and lose the colour, so the value
 * stays and the usage narrows instead. Amber text becomes --brick-lt, which
 * passes at 5.47:1.
 *
 * COLOUR USAGE RULES — enforce these.
 *
 * 1. --red is RESERVED. It may only mark NC State or a number our own model
 *    produced. Never a hover state, never a border, never a generic accent.
 *    This is what lets a reader identify our number without a legend.
 * 2. --steel marks opponents, and is the FCS fallback because the feed returns
 *    no colour for FCS teams.
 * 3. --brick is the structural accent — rules, active borders, the favicon
 *    plate. NOT interchangeable with --red.
 * 4. Opponent names render in the team's own primary hex from CFBD, guarded —
 *    see the team-colour rule in PROJECT.md. Never hand-pick per team.
 * 5. #AE4536 is the rasterised favicon plate only. Deliberately not a token: it
 *    must never appear in CSS. Regenerate icons at --brick if needed.
 *
 * TYPE RULE — never set a figure in Archivo or Plex Sans. Every number on the
 * site (scores, ranks, countdowns, error values, version numbers) is IBM Plex
 * Mono. That is what makes columns align and gives the site its register.
 *
 * Archivo is a variable font and the width axis is load-bearing. Set it with
 * font-variation-settings; do not rely on font-stretch.
 */

:root{
  --display: 'Archivo', system-ui, sans-serif;         /* headings, wordmark */
  --body:    'IBM Plex Sans', system-ui, sans-serif;   /* prose */
  --mono:    'IBM Plex Mono', ui-monospace, monospace; /* every figure, label, eyebrow */
}

/* A dark theme is a second set of VALUES here, never another rename. Fill these
 * in to enable it — the role names above already carry the meaning, so no
 * selector or property anywhere else has to change.
 *
 * The retired dark palette, for reference when that happens:
 *   --surface #14161A · --surface-2 #1B1F26 · --surface-3 #232932
 *   --line #2E353F · --ink #EFEAE1 · --ink-2 #8A929C · --ink-3 #5F6771
 *
 * Brand and semantic tokens carried over unchanged between themes, though
 * --steel and --amber pass contrast on the dark ground and fail on this one.
 */
@media (prefers-color-scheme: dark){
  /* :root{ ... } — intentionally empty. The site is light-only for now. */
}