/* ==========================================================================
   Chrome palette layer — header, footer, game loader
   --------------------------------------------------------------------------
   Scope: the three surfaces this build owns (the shell header, the shell
   footer and the #sprunki-loader overlay). Page content, the game title block
   and the vendor's article styles are deliberately untouched.

   What it owns. The vendor's inline <style> paints the header with #1a1a2e and
   a hard-coded 11-hue rainbow on the nav chips, with `color: white` labels.
   The header bar and the rainbow are restored here as the site's own colours;
   only the chip label ink changes (white measured 1.28:1 – 3.32:1 on the hues,
   every one below WCAG AA — see --chrome-chip-ink). The footer asks for
   `var(--dark-color)` with `white` ink, and 14 pages (the blog's) never define
   `--dark-color`, so their footer had no background at all. The loader asked
   for `--playground`, which no stylesheet defines, and silently fell back to
   #1b1035 — a colour found nowhere else on the site.

   Where the values come from. reports/design/palette-usage.csv counts every
   colour in dist/ (1,608 pages). Each token below is an existing pixel from
   that census, named by the vendor token that already carries it:

     header bar         #1a1a2e   rank 29, 1,594 pages   vendor `header`
     --dark-color       #2d3436   rank 13, 1,607 pages   footer surface today
     --light-color      #f5f6fa   rank 15, 1,607 pages   page background
     --text-color       #2d3436   rank 13, 1,607 pages   body ink
     --secondary-color  #00cec9   rank 28, 1,594 pages   hover / accent
   Nothing in this file invents a colour. The 50 pages that take their tokens
   from the mb9 stylesheet define --secondary-color as #3b5998; the chrome
   tokens are written out as values rather than var() chains so all 1,608
   pages render the same chrome.

   Contrast for every pair below: reports/design-2026-10-03/palette-contrast.csv,
   measured again from the rendered page in colors-*.csv / contrast-after.csv.

   Specificity: the vendor emits its <style> after this sheet, so every
   selector here is one notch more specific than the rule it replaces
   (`header.site-header nav ul li:nth-child(1)` wins over
   `header nav li:nth-child(1)`).
   ========================================================================== */

:root {
  /* Header bar: the vendor's own `header` colour, on all 1,594 crawled pages. */
  --chrome-bar: #1a1a2e;
  --chrome-surface: #2d3436;    /* = --dark-color, the footer's own surface */
  --chrome-ink: #f5f6fa;        /* = --light-color    */
  /* Chip label ink. The vendor's `white` measured 1.28:1 – 3.32:1 on the 11
     hues, all below AA; the bar's navy clears AA on every one of them, worst
     pair chip 6 (#8E83D2) = 5.14:1. */
  --chrome-chip-ink: #1a1a2e;
  --chrome-accent: #00cec9;     /* = --secondary-color */
  /* The game loader reads this instead of its old undefined-token fallback. */
  --playground: #2d3436;        /* = --dark-color     */
}

/* --- Header -------------------------------------------------------------
   Bar: vendor `header { background-color: #1a1a2e }` (repeated on every page),
   restored. It is the colour the logo artwork was drawn on (the wordmark is
   white-filled: 18% of its opaque pixels are >= #e0e0e0, so a light bar would
   erase it) and it lifts every pair on the bar: bar ink 15.79:1, the vendor's
   own search-icon colour #636e72 3.25:1 (it was 2.42:1 on #2d3436, which is
   why that patch existed before), focus ring 8.67:1.
   Chips: the vendor's own 11 hues, in the vendor's own order. Ink is
   --chrome-chip-ink; every label clears AA (5.14:1 – 13.36:1). */
header.site-header {
  background-color: var(--chrome-bar);
  color: var(--chrome-ink);
}
/* Only the shell header is chrome. The vendor styles the bare element
   (`header { background-color: #1a1a2e }`), which also paints any <header> a
   page's own markup contains: /leaderboard's title band is one, and it then
   renders its dark body ink (#212529) on the navy bar. Exactly one built page
   has an inner <header>; the old site rendered that band transparent. */
header:not(.site-header) {
  background-color: transparent;
}
header.site-header nav ul li:nth-child(1) { background-color: #FFCA37; }
header.site-header nav ul li:nth-child(2) { background-color: #9089F2; }
header.site-header nav ul li:nth-child(3) { background-color: #A6D776; }
header.site-header nav ul li:nth-child(4) { background-color: #FF9437; }
header.site-header nav ul li:nth-child(5) { background-color: #C18BE5; }
header.site-header nav ul li:nth-child(6) { background-color: #8E83D2; }
header.site-header nav ul li:nth-child(7) { background-color: #25d366; }
header.site-header nav ul li:nth-child(8) { background-color: #C1d366; }
header.site-header nav ul li:nth-child(9) { background-color: #FF9366; }
header.site-header nav ul li:nth-child(10) { background-color: #FF93FF; }
header.site-header nav ul li:nth-child(11) { background-color: #75F7FB; }
header.site-header nav ul li a {
  color: var(--chrome-chip-ink);
}
/* Hover: accent chip. #1a1a2e on #00cec9 = 8.67:1. */
header.site-header nav ul li:hover {
  background-color: var(--chrome-accent);
}
header.site-header nav ul li:hover a {
  color: var(--chrome-chip-ink);
}
/* Keyboard focus ring sits outside the chip, on the navy bar:
   #00cec9 on #1a1a2e = 8.67:1 (WCAG 1.4.11 needs 3:1). */
header.site-header nav ul li a:focus-visible {
  outline: 2px solid var(--chrome-accent);
  outline-offset: 2px;
}

/* --- Footer -------------------------------------------------------------
   Already on var(--dark-color)/white; the ink moves to the same token as the
   header and the surface gains the literal fallback the vendor never set, so
   the 14 blog pages stop rendering white text on no background.
   Ink #f5f6fa on #2d3436 = 11.74:1. Link hover stays the vendor's
   var(--secondary-color): #00cec9 on #2d3436 = 6.44:1. */
footer.site-footer {
  background-color: var(--chrome-surface);
  color: var(--chrome-ink);
}
footer.site-footer a {
  color: var(--chrome-ink);
}

/* --- Game loader (#sprunki-loader) --------------------------------------
   The overlay is generated markup (scripts/build/lib/render.mjs) and is styled
   inline, so its three colours live there rather than here; this sheet only
   supplies the two tokens that markup reads. Both were previously off-palette:
   the background fell back to #1b1035 (found nowhere else in the census) and
   the progress bar used --primary-color, #6c5ce7, which measures 2.61:1 on the
   unified #2d3436 surface — below the 3:1 WCAG 1.4.11 asks of a UI component.
   The bar now rides --secondary-color: #00cec9 on #2d3436 = 6.44:1, and the
   copy rides --light-color: #f5f6fa on #2d3436 = 11.74:1. */