/*
 * HavilahWin Ice Hockey — sport tokens.
 *
 * Adapted from Claude Design's `tokens.css`. Five values are deliberately different from
 * the handoff, and each change is a measured contrast failure against the spec's own
 * §9 target of 4.5:1 for text and 3:1 for interface elements. Ratios below are computed,
 * not estimated.
 *
 *   caption   #8a8785 -> #6b6867   3.19:1 on ground  ->  4.94:1
 *             The most-used colour in the design, at the smallest size (9-10.5px).
 *   accent-on
 *   -white    #ec3013 -> #c8270e   4.20:1            ->  5.60:1
 *             This is the primary button label AND the G? goalie badge — the element the
 *             spec calls the loudest thing on the screen. It could not be read.
 *   pip-edge  #b3b0ae -> #8f8c8a   2.16:1            ->  3.34:1
 *             The L-pip border carries state, so it is an interface element, not decoration.
 *   body      #3c3a38 promoted to a token. It was used 31 times on the desktop while being
 *             absent from a sheet that says "if it is not here, it is a bug".
 *   won       ADDED. The handoff has no success colour, so §5 gave both "beating forecast"
 *             and "well under forecast" the same red, and "on model" and "slightly under"
 *             the same grey — four verdicts collapsed into two. Engine performance exists
 *             to show when the engine is wrong; it needs to distinguish them.
 *
 * --hk-goal stays #ec3013 for large fills, the fit counter and the active tab underline,
 * where 3:1 is the applicable bar and it passes.
 */

:root {
  /* chrome — masthead, sub-bar, league headers, slip rail, bottom nav */
  --hk-chrome:      #14171a;
  --hk-chrome-2:    #1e2226;
  --hk-chrome-line: #2c3237;
  --hk-on-chrome:   #eef2f3;
  --hk-on-chrome-2: #8b969a;   /* 5.93:1 on chrome — passes */

  /* content — every surface you read a number off */
  --hk-ground:  #f3f2f2;
  --hk-surface: #ffffff;
  --hk-ink:     #201e1d;
  --hk-ink-2:   #5a5856;
  --hk-body:    #3c3a38;       /* promoted from undeclared use */
  --hk-ink-3:   #6b6867;       /* was #8a8785 — captions, 9-10.5px */
  --hk-rule:    #201e1d;
  --hk-rule-1:  #d8d6d5;
  --hk-rule-0:  #e9e8e7;
  --hk-edge:    #8f8c8a;       /* was #b3b0ae — state-bearing borders */

  /* accent — the goal light */
  --hk-goal:      #ec3013;     /* large fills, counter, tab underline only */
  --hk-goal-fill: #c8270e;     /* was #ec3013 — anything with a white label on it */
  --hk-goal-700:  #b8250c;     /* accent as text on a light ground */

  /* cold family — ice */
  --hk-frost:   #e4edf0;
  --hk-frost-2: #c9dde3;
  --hk-cold:    #2a5f6e;

  /* verdicts — added: the handoff had no positive colour */
  --hk-won:  #166043;          /* beating forecast, won legs. 6.74:1 on ground */
  --hk-warn: #8a5a12;          /* slightly under */
  --hk-bad:  #b8250c;          /* well under forecast, lost legs */

  /* type */
  --hk-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hk-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --hk-display: 58px; --hk-h1: 34px; --hk-h2: 28px; --hk-h3: 22px;
  --hk-sentence: 21px; --hk-body-size: 14px; --hk-dense: 12.5px;
  --hk-caption: 10.5px; --hk-cap: 9px;

  --hk-s1: 4px;  --hk-s2: 8px;  --hk-s3: 12px; --hk-s4: 14px;
  --hk-s5: 18px; --hk-s6: 24px; --hk-s7: 36px; --hk-s8: 48px;

  --hk-radius: 0;
  --hk-radius-brand: 6px;

  --hk-touch: 42px; --hk-checkbox: 22px; --hk-input: 46px;

  --hk-scrim: rgba(20, 23, 26, .6);
  --hk-modal-shadow: 0 30px 80px rgba(20, 23, 26, .5);

  --hk-fast: 220ms; --hk-base: 320ms; --hk-max: 400ms;
  --hk-ease: cubic-bezier(.22, .68, .36, 1);
}

/* Every figure is mono with tabular numerals so columns align. */
.hk .m, .hk-mono { font-family: var(--hk-mono); font-variant-numeric: tabular-nums; }

/* A price the engine made because no bookmaker offered one. Pattern AND colour AND the
   word "model" — three signals, so none of them has to carry it alone. */
.hk-modelled {
  background: repeating-linear-gradient(45deg, #f3f2f2 0 5px, #ffffff 5px 10px);
  border-color: var(--hk-edge);
  color: var(--hk-cold);
}

/* Focus is never removed and never the browser default. */
.hk :focus-visible { outline: 2px solid var(--hk-goal); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .hk *, .hk *::before, .hk *::after { animation: none !important; transition: none !important; }
}