/* ============================================================
   hi-tokens.css — Hockey Insights, the single source of truth
   ------------------------------------------------------------
   THIS SHEET LOADS FIRST ON EVERY PAGE. It declares values only.
   It never styles an element, never sets a font on <body>, and
   never emits a rule with a tag or class selector. Anything that
   paints belongs in season.css / hi-fx.css / seo-pages.css /
   styles.css, which consume these tokens.

   WHY THE --hi- PREFIX
   The site grew two dialects. seo-pages/styles.css own the
   unprefixed names (--blue, --muted, --border, --gold) with the
   OLD frost-blue values, and they load after this file. Prefixing
   the canon means a page can adopt the truth deliberately —
   `--border: var(--hi-line)` — instead of losing a cascade race.
   The two eras keep their local aliases; the aliases point here.

   THE GRAMMAR THIS ENCODES
     ink    the thing that actually happened — totals, peaks, names
     blue   navigation, rates, projections, anything forward-looking
     mint   the upward read
     coral  the downward read
     gold   NOTHING except the U+25F7 (◷) receipt glyph. See below.

   NO ITALICS ANYWHERE ON THIS SITE. Newsreader is used upright.
   There is no --hi-italic token and there never will be.
   ============================================================ */

:root {

  /* ==========================================================
     1. SURFACE — the dark elevation ramp
     ----------------------------------------------------------
     Three levels, always in this order, never skipped:
       surface-0  the page itself (the field / the parchment)
       surface-1  a card sitting on the page
       surface-2  something raised OFF a card — a drawer, an
                  inset panel, a sticky header inside a card,
                  a hovered row. Also the "quieter card" tone
                  in light theme, where lifting is not available.
     In light theme the ramp reads by CONTRAST DIRECTION: the
     field is the darkest of the three and cards go paler, the
     way ink sits on stacked paper. In dark theme it inverts —
     each level steps a little LIGHTER, because on a dark ground
     elevation is light. The steps are deliberately small
     (~6 L* apart); anything larger and cards look like holes.
     ========================================================== */
  --hi-surface-0:#f2ede1;   /* page ground — parchment */
  --hi-surface-1:#fffaf1;   /* card */
  --hi-surface-2:#f7f1e2;   /* raised / inset / quieter card */
  --hi-surface-3:#ece4d3;   /* track, well, empty gauge — never text-bearing */

  /* era aliases: the names the older sheets already say out loud */
  --hi-field:var(--hi-surface-0);
  --hi-card:var(--hi-surface-1);
  --hi-card-2:var(--hi-surface-2);
  --hi-track:var(--hi-surface-3);

  /* ==========================================================
     2. RULES — the two hairlines, and only two
     ----------------------------------------------------------
     --hi-line   a border that DIVIDES: a card edge, a panel edge,
                 the outline of a chip. Visible on purpose.
     --hi-hair   a rule that GROUPS: row separators, the line
                 under a card's footer, table zebra edges. It must
                 be felt, not read.
     Do not invent a third. If a rule needs more weight than
     --hi-line, it wants --hi-blue and it wants to be 3px.
     ========================================================== */
  --hi-line:#d7cbb7;
  --hi-hair:#e4dac7;

  /* ==========================================================
     3. INK
     ----------------------------------------------------------
     --hi-ink    body copy, headlines, and every DELIVERED FACT.
                 A career total is ink. A projection is not.
     --hi-ink-2  secondary prose that still has to be read fully.
     --hi-muted  labels, eyebrows, captions, units, the small
                 uppercase furniture. Measured at 5.3:1 on
                 surface-1 and 4.9:1 on surface-2 — do NOT darken
                 the card without re-checking this token.
     ========================================================== */
  --hi-ink:#0d1f3c;
  --hi-ink-2:#28405f;
  --hi-muted:#556a80;
  --hi-ink-soft:#ece7dc;    /* ink at wash strength — fills, not text */

  /* ==========================================================
     4. BLUE — navigation and the forward-looking read
     ----------------------------------------------------------
     --hi-blue       the brand blue. The 3px masthead and footer
                     rule is ALWAYS this literal value, in both
                     themes, because it sits on navy furniture
                     that does not change with the theme.
     --hi-blue-2     the lifted blue: active underlines, hovers,
                     the second stop of a gradient.
     --hi-blue-soft  a fill behind blue text. Never a border.
     --hi-blue-line  a blue hairline — chip edges, quote rails.
     ========================================================== */
  --hi-blue:#1f5fbf;
  --hi-blue-2:#4d8fe8;
  --hi-blue-soft:#e5edfb;
  --hi-blue-line:#bed3f2;

  /* ----------------------------------------------------------
     4b. DATA — the one fill/track pair every bar is drawn with
     ----------------------------------------------------------
     A percentile bar is not text and it is not furniture. It is
     a quantity, and a quantity gets ONE colour per theme so that
     five bars stacked read as one axis instead of five moods.

     --hi-data-track  the empty remainder. It is the SAME tone in
                      every chart on the page. It is never
                      surface-3 in dark: surface-3 is a hole cut
                      into the page (#070e1a, near-black), and a
                      near-black remainder under a pale fill
                      inverts the whole chart.
     --hi-data-fill   the filled part. Light: ink navy on
                      parchment — the delivered fact, printed.
                      Dark: the brand blue lifted to clear the
                      track. Measured fill-vs-track: 12.99:1
                      light, 5.25:1 dark.

     WHITE IS NOT A DATA COLOUR. On a dark ground a near-white
     fill is the loudest object on the page and it is the same
     value as the headline — the chart then outranks the prose.
     Semantic bars (mint / coral) keep their own hue; everything
     neutral routes through this pair.
     ---------------------------------------------------------- */
  --hi-data-fill:#0d1f3c;
  --hi-data-track:#ece4d3;

  /* ==========================================================
     5. SEMANTIC — the direction of the read
     ----------------------------------------------------------
     mint  = above expectation, gained, ahead of pace
     coral = below expectation, lost, behind pace
     Each has a -soft companion for the pill fill. The solid
     token is the text and the border; the soft token is the
     background. Never the reverse — coral-on-coral is illegible.
     ========================================================== */
  --hi-mint:#23705a;
  --hi-mint-soft:#e0f0ea;
  --hi-coral:#b34e3e;
  --hi-coral-soft:#f7e3de;

  /* ==========================================================
     6. RECEIPT GOLD — one glyph, one job
     ----------------------------------------------------------
     --hi-receipt colours the U+25F7 (◷) mark that opens every
     as-of stamp and every source line. That is its ENTIRE remit.

     IT MUST NOT BE USED FOR: buttons, links, stat numbers,
     badges, medals, first-round markers, "premium" anything,
     hero rules, chart series, borders, or hover states. If a
     value on this site is gold and it is not a ◷, that is a bug.
     Blue carries emphasis. Ink carries authority.
     ========================================================== */
  --hi-receipt:#b07f1e;

  /* The same glyph, on navy furniture. Navy does not flip with the
     theme, so neither does this: #b07f1e measures ~2.1:1 on #0d1f3c
     and the receipt disappears. Use it INSIDE .masthead / .hero /
     .footer / any navy band, and nowhere else. Still ◷ only. */
  --hi-receipt-on-navy:#d9b467;

  /* ==========================================================
     7. NAVY FURNITURE — identical in both themes
     ----------------------------------------------------------
     The masthead, the hero band, the footer and the curve band
     are navy always. Because they do not flip, anything sitting
     ON them needs its own on-navy tones — the light-theme
     --hi-blue would drop to ~2:1 there.

     Two consequences that have bitten before:
       · accent text on navy is --hi-on-navy-hi (#8ab8f2), never
         --hi-blue;
       · an NHL crest's _light.svg variant vanishes on navy.
         Inside a navy band, force the _dark.svg art.
     ========================================================== */
  --hi-navy:#0d1f3c;
  --hi-navy-2:#0a1628;      /* the flatter navy the footer uses */
  --hi-hero-a:#061529;
  --hi-hero-b:#0f4a8f;
  --hi-on-navy:#dfe9f8;     /* body copy on navy */
  --hi-on-navy-dim:#a8c2de; /* labels on navy */
  --hi-on-navy-hi:#8ab8f2;  /* the accent on navy — the blue substitute */
  --hi-navy-line:rgba(157,184,221,.26);
  --hi-navy-fill:rgba(255,255,255,.06);

  /* ==========================================================
     8. SHADOW
     ----------------------------------------------------------
     --hi-shadow    a resting card
     --hi-lift      the same card hovered or focused
     --hi-ambient   the soft, wide, nearly-colourless halo that
                    tells surface-2 it is raised. It carries NO
                    offset on purpose: elevation here is ambient
                    occlusion, not a drop shadow. Pair it with a
                    surface-2 background, never use it alone.
     ========================================================== */
  --hi-shadow:0 18px 44px rgba(13,31,60,.09);
  --hi-lift:0 26px 60px rgba(13,31,60,.16);
  --hi-ambient:0 0 0 1px rgba(13,31,60,.04), 0 10px 30px -12px rgba(13,31,60,.14);

  /* ==========================================================
     9. TYPE — three stacks, one scale
     ----------------------------------------------------------
     serif  Newsreader, UPRIGHT, weights 500-700. Display only:
            h1/h2/h3 and the big figures. Never body copy.
     sans   everything you read in paragraphs, plus every label.
     mono   receipts, timestamps, ids, axis ticks, chip text —
            anything that is a machine's answer rather than ours.
     ========================================================== */
  --hi-serif:'Newsreader', Georgia, serif;
  --hi-sans:'Source Sans 3','Instrument Sans','Segoe UI', system-ui, sans-serif;
  --hi-mono:'JetBrains Mono','Cascadia Mono', ui-monospace, monospace;

  /* The scale. h1/h2 are fluid; below that the site is dense by
     design and fixed sizes keep tables honest across breakpoints. */
  --t-h1:clamp(2.55rem,5.7vw,4.4rem);
  --t-h2:clamp(1.6rem,2.7vw,2.05rem);
  --t-h3:1.3rem;
  --t-dek:.98rem;   /* the standfirst under an h1 */
  --t-body:.86rem;  /* dense body — card copy, table cells */
  --t-small:.78rem; /* captions, secondary card copy */
  --t-micro:.57rem; /* the small uppercase label — see 10 */
  --t-mono:.62rem;  /* receipts and stamps */

  /* ==========================================================
     10. LABEL GRAMMAR — the small uppercase furniture
     ----------------------------------------------------------
     The single loudest tell that two pages were built in
     different years. One size, one weight, one tracking. A label
     is --hi-muted unless it is naming a live/blue thing.
       sans label  -> --t-micro / --hi-lbl-w / --hi-lbl-track
       mono label  -> --t-mono  / 700 / --hi-lbl-track-mono
     ========================================================== */
  --hi-lbl-w:900;
  --hi-lbl-track:.18em;
  --hi-lbl-track-mono:.14em;

  /* ==========================================================
     11. RHYTHM + RADII
     ----------------------------------------------------------
     --sec  the gap between two major sections. The only vertical
            value allowed to be this large.
     --pad  the page gutter. Shrinks at 640.
     --gap  the default gap inside a grid of cards.
     --rad  a card. --rad-sm an inner element (a stat well, a
            button). --rad-pill anything that is a chip.
     ========================================================== */
  --hi-maxw:1180px;
  --sec:78px;
  --pad:28px;
  --gap:18px;
  --rad:18px;
  --rad-sm:12px;
  --rad-pill:999px;

  /* ==========================================================
     12. MOTION
     ----------------------------------------------------------
     --mo-fast    a colour or opacity change on an element the
                  cursor is already on. Must not be perceivable
                  as an animation.
     --mo-base    the default. Transforms, reveals, panel opens.
     --mo-slow    something entering that the reader has not
                  asked for yet, or a value settling.
     --mo-ease    THE easing curve. There is one. It decelerates
                  hard, which is what makes motion here read as
                  paper being set down rather than UI springing.
     --mo-stagger the delay between siblings in a sequence. Cap
                  any stagger at ~8 items; past that it is a wait.
     Everything built on these must collapse under
     prefers-reduced-motion.
     ========================================================== */
  --mo-fast:120ms;
  --mo-base:240ms;
  --mo-slow:400ms;
  --mo-ease:cubic-bezier(.22,.61,.36,1);
  --mo-stagger:42ms;
}

/* ============================================================
   DARK — [data-theme="dark"] on <html>
   Only values that actually change are restated. The navy
   furniture, the 3px blue rule, the type scale, the rhythm and
   the motion tokens are theme-independent and are NOT repeated
   here on purpose: if a token appears in both blocks, someone
   has to keep two numbers in sync forever.
   ============================================================ */
:root[data-theme="dark"] {

  /* The elevation ramp inverts. Each step is a small lift toward
     the light, plus a touch more blue — cards read as lit paper,
     not as grey boxes. surface-3 goes BELOW the page: a track is
     a hole, and a hole on a dark ground is darker still. */
  --hi-surface-0:#0a1220;
  --hi-surface-1:#101c31;
  --hi-surface-2:#16263f;
  --hi-surface-3:#070e1a;

  --hi-line:rgba(157,184,221,.20);
  --hi-hair:rgba(157,184,221,.11);

  --hi-ink:#eef4fc;
  --hi-ink-2:#c8d8ee;
  --hi-muted:#93a9c6;
  --hi-ink-soft:rgba(198,214,234,.16);

  /* Blue lifts one step in dark so it clears the navy ground.
     --hi-blue is now #4d8fe8 for TEXT — but the 3px masthead
     rule still hard-codes #1f5fbf, because that rule sits on
     navy, which did not change. */
  --hi-blue:#4d8fe8;
  --hi-blue-2:#7fb2f0;
  --hi-blue-soft:rgba(77,143,232,.15);
  --hi-blue-line:rgba(77,143,232,.32);

  /* The data pair inverts its logic rather than its values: the
     fill is still the brand read, the track is still "less than
     the page". #5b9bf0 on #1a2740 = 5.25:1. The track deliberately
     sits ABOVE surface-3 — a chart remainder is a quiet ground,
     not a hole. */
  --hi-data-fill:#5b9bf0;
  --hi-data-track:#1a2740;

  --hi-mint:#7ad0b1;
  --hi-mint-soft:rgba(122,208,177,.12);
  --hi-coral:#e89786;
  --hi-coral-soft:rgba(224,138,122,.13);

  --hi-receipt:#d9b467;   /* still ◷ only */

  --hi-shadow:0 22px 54px rgba(2,8,20,.5);
  --hi-lift:0 30px 70px rgba(2,8,20,.66);
  /* on a dark ground the halo has to carry a rim-light, or a
     raised surface is indistinguishable from a flat one */
  --hi-ambient:0 0 0 1px rgba(157,184,221,.09), 0 12px 34px -14px rgba(0,0,0,.8);
}