/* ==========================================================================
   Talata dark mode. Loaded LAST on all 50 pages by tools/apply-shared-header.py.

   WHY THIS FILE AND NOT 50 EDITS
   ------------------------------
   Deng, 26 Aug 2026: "make the whole website dark, the white hurts the eyes."

   46 pages each carry their own inline <style> with their own :root block, and
   they do not agree on names. Two families grew up side by side:

     older pages   --bg --text --text-muted --border --dark --blue --blue-light
     newer pages   --black --navy --blue --baby --sky --mist --ink --ink2 --line

   Redefining both families here, after every page's own style block, flips the
   whole site from one file. Editing 46 :root blocks by hand would be 46 chances
   to miss one, and the next new page would be born light again.

   Literal colours that never went through a variable (`background:#fff` appears
   136 times) are handled by tools/apply-dark-mode.py, which rewrites them to
   these same tokens. This file is the single place the palette lives.

   CONTRAST
   Body text #F2F6FC on #121824 is about 15:1. Muted #B3C0D2 is about 9:1.
   Both clear WCAG AA comfortably, which matters more on dark than on light
   because thin type on a dark ground loses perceived weight.

   Lifted on 26 Aug after Deng found the first build too dark to read. The
   ground moved from #0B0F17 to #121824 and every surface with it, so cards now
   separate from the page instead of merging into one black field.
   ========================================================================== */

:root {
  /* ---- the dark palette ---- */
  --td-bg:        #121824;   /* page ground */
  --td-surface:   #1C2534;   /* cards, panels, anything that was #fff */
  --td-surface-2: #263148;   /* raised: hovers, inputs, table stripes */
  --td-line:      #35435D;   /* borders and rules */
  --td-text:      #F2F6FC;   /* body copy */
  --td-muted:     #B3C0D2;   /* secondary copy */
  /* Text-safe accent. The brand blue #2C4FD8 is a FILL colour: white on it is
     fine, but as type on a dark card it measures 2.67:1, which fails. Anything
     that used the brand blue for TEXT gets this instead. */
  --td-link:      #8FD6FF;
  --td-accent:    #7DD3FC;   /* Talata baby blue, the accent on dark */
  --td-accent-2:  #BAE6FD;   /* sky, for hovers */
  --td-brand:     #2C4FD8;   /* filled buttons. White on this is ~7:1 */
  --td-navy:      #0B1F3A;   /* kept: the brand navy still reads on dark */
  --td-card-hi:   #223047;   /* a card sitting on another card */
  /* 🔴 31 Aug: the "stop" callout on the four help pages was a literal
     `background:#FDECEA`, a pale pink, and the pink never went through a
     variable so nothing in the token remap could reach it. Its heading and its
     bold runs carry --td-text and its body carries --td-muted, so the box
     rendered #F2F6FC on #FDECEA at 1.05:1 and #B3C0D2 on #FDECEA at 1.61:1.
     A parent could not read "Read this before you click join".
     A red-TINTED dark surface keeps the "this one is louder than the blue
     warn box" meaning and lets the light type on top of it work:
     text 13.91:1, muted 8.18:1, and it separates from the page ground at
     1.18:1, marginally more than --td-surface does at 1.15:1.
     --td-stop-line is the same red talata-fixtures.css already uses for a
     loss, so the site keeps one red rather than growing a second. */
  --td-stop:      #33212A;   /* danger / stop callout fill */
  --td-stop-line: #F2777A;   /* its accent bar. 5.53:1 on --td-stop */

  /* ---- newer pages (index, games, shop) ---- */
  --black: var(--td-bg);
  --navy:  var(--td-surface);
  --blue:  var(--td-brand);
  --baby:  var(--td-accent);
  --sky:   var(--td-accent-2);
  --mist:  var(--td-bg);
  --ink:   var(--td-text);
  --ink2:  var(--td-muted);
  --line:  var(--td-line);
  --white: var(--td-surface);

  /* ---- older pages (blog, camps, help) ---- */
  --bg:          var(--td-bg);
  --text:        var(--td-text);
  --text-muted:  var(--td-muted);
  --muted:       var(--td-muted);
  --border:      var(--td-line);
  --dark:        var(--td-surface);
  /* 🔴 27 Aug: this pointed at --td-accent, a LIGHT baby blue, and the older
     pages use it as a FILL 31 times and as a text colour zero times. So every
     .price-card.highlight, table th and .highlight-box became a pale slab
     carrying --td-text / --td-link / --td-muted, all of which are light.
     That is the whole camp-price-card cluster: "7.500 kr" at 1.54:1,
     "Registration closed" at 1.11:1, "Standard" at 1.05:1.
     A raised dark surface keeps the "this one is highlighted" meaning and lets
     the light type on top of it work. The two places that used it as a BORDER
     ring now name --td-accent directly. */
  --blue-light:  var(--td-surface-2);
  --talata:      var(--td-brand);
  --talata-dark: var(--td-surface);
  --talata-light:var(--td-accent);
  --gold:        var(--td-accent-2);
}

html { color-scheme: dark; }

body {
  background: var(--td-bg);
  color: var(--td-text);
}

/* Form controls do not inherit, and a white input on a dark page is the single
   most jarring thing left once the rest is dark.
   The selector is doubled on purpose. Pages style their own fields through a
   class (`.trial input`, `.form input`), which outranks a bare `input` no
   matter how late this sheet loads, and the result was a near-white box
   holding near-white text. `:where()` adds no specificity of its own, so
   `input:where(...)` still loses; repeating the element does win. */
input, select, textarea,
input:not([type=submit]):not([type=button]),
select:not([multiple]),
textarea:not([readonly]) {
  background: var(--td-surface-2) !important;
  color: var(--td-text) !important;
  border-color: var(--td-line) !important;
}
/* Buttons are excluded above so a brand-coloured submit keeps its fill. */
button, input[type=submit], input[type=button] { color: inherit; }
input::placeholder, textarea::placeholder { color: var(--td-muted); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--td-accent);
  outline-offset: 1px;
}

/* A logo drawn in navy or black is invisible on a dark ground. The partner
   strip was rebuilt on a LIGHT background on 19 Aug precisely so brands could
   keep their own colours, so it keeps its light card rather than being
   inverted, which would recolour every mark a second time.
   Its TEXT has to invert with it, or the heading sits near-white on near-white.
   That is the whole trap: a light island inside a dark page needs its own
   colours, not the page's. */
.partners, .partner-strip, .logos, .logo-strip, .partners-section {
  background: #EEF2F7;
}
.partners-section, .partners-section h1, .partners-section h2,
.partners-section h3, .partners-section h4, .partners-section p,
.partners-section span, .partners-section li, .partners-section b {
  color: #101828;
}
.partners-section a { color: #1E40AF; }

/* Buttons filled with a light accent need dark type. The page CSS sets the
   fill and the colour in two different rules, so the rule-aware pass in
   apply-dark-mode.py cannot see them together. Found on the homepage camp
   cards: "Get the details" was #8FD6FF on #7DD3FC, a ratio of 1.05.

   🔴 TIGHTENED 27 Aug. This matched the bare SUBSTRING "7DD3FC", so it could
   not tell `background:#7DD3FC` (a fill, wants dark type) from `color:#7DD3FC`
   (baby-blue TYPE, wants to stay baby blue). Every element using the accent as
   a text colour inline was forced to the page background and went invisible:
   academy/mini/sparks eyebrows, the blog eyebrow and a bold run, and the
   eyebrow plus underlined link on both camp pages. Measured on academy.html,
   "The Talata Way" was 1.08:1 against its navy ground.
   It was also redundant for the case it was written for: every inline fill on
   the site already declares `color:var(--td-bg)` next to it, so the buttons
   were never relying on this. Now it only fires on an actual background. */
[style*="background:#7DD3FC"],  [style*="background: #7DD3FC"],
[style*="background:#7dd3fc"],  [style*="background: #7dd3fc"],
[style*="background:#BAE6FD"],  [style*="background: #BAE6FD"],
[style*="background:#bae6fd"],  [style*="background: #bae6fd"],
[style*="background-color:#7DD3FC"], [style*="background-color: #7DD3FC"],
[style*="background-color:#7dd3fc"], [style*="background-color: #7dd3fc"],
[style*="background-color:#BAE6FD"], [style*="background-color: #BAE6FD"],
[style*="background-color:#bae6fd"], [style*="background-color: #bae6fd"]
  { color: var(--td-bg) !important; }

/* The camp cards fill their button with the baby accent in one rule and colour
   the text in another, so neither the declaration pass nor the rule-aware pass
   can see them together. #8FD6FF on #7DD3FC is 1.05:1, which is nothing.
   Scoped tight to the card button rather than links generally. */
.camps .ccard > a,
.camps .ccard > a:visited,
.camps .ccard > a:hover {
  color: var(--td-bg) !important;
  font-weight: 700;
}

/* An <em> inside a heading is the site's accent-word pattern. It reads on dark
   and disappears on the light partner card, so it inverts with its host. */
.partners-section h2 em,
.partners-section h3 em,
.partners-section em { color: #1E40AF; }

/* Anything still painting itself white after the token pass. Kept narrow on
   purpose: a blanket `* { background: dark }` would flatten the gradients and
   photo overlays the hero sections depend on. */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
/* Added 27 Aug. The three long camp pages close with an "Other Talata camps"
   band hardcoded to #f5f5f5, a light grey the #fff patterns above never
   matched, while its heading carries color:var(--td-text). That heading
   measured 1.01:1 — the worst reading anywhere on the site. */
[style*="background:#f5f5f5"],
[style*="background: #f5f5f5"],
[style*="background:#F5F5F5"],
[style*="background: #F5F5F5"] {
  background: var(--td-surface) !important;
}

/* Tables and code blocks are the usual stragglers in long-form pages. */
table { background: var(--td-surface); color: var(--td-text); }
th, td { border-color: var(--td-line); }
thead th { background: var(--td-surface-2); }
pre, code { background: var(--td-surface-2); color: var(--td-text); }
hr { border-color: var(--td-line); }

/* Opponent crests are drawn for a light page: several are navy or black line
   art on transparency and vanish on dark, so each sits on its own light chip.
   Talata's own lockups are the opposite — white on transparency — so they are
   excluded here, or the club logo would be white on white. */
.tf-crest:not(.is-talata) img { background: #FFFFFF; border-radius: 6px; }

::selection { background: var(--td-accent); color: var(--td-bg); }

/* ---- text that inherited a background colour ----
   The single worst dark-mode defect, found on /coaches on 26 Aug: coach names
   rendered #131A26 on #0B0F17, a contrast ratio of 1.1, which is invisible.
   The cause is one variable doing two jobs. `--navy` is correct remapped to a
   dark surface, and catastrophic when a page uses `color: var(--navy)` for a
   heading. tools/apply-dark-mode.py rewrites those declarations, and these
   rules catch anything it could not reach. */
h1, h2, h3, h4, h5, h6 { color: var(--td-text); }
a:not([class]) { color: var(--td-link); }

/* ---- the stop callout, defensively ----
   The page rules are fixed at source, so this should never have to fire. It is
   here for the next page that copies the old help-page <style> block wholesale
   and brings the pink literal back with it.
   `body .box.stop` is (0,2,1) and the page's `.box.stop` is (0,2,0), so this
   wins on SPECIFICITY, not on load order. That distinction is the whole point:
   the nav dropdown broke on 26 Aug because `.tn-drop a` and `a:not([class])`
   were both (0,1,1) and a tie is only ever settled by which file loaded last.
   Do not lower this to a bare `.box.stop`. */
body .box.stop,
body .callout.stop,
body .note.stop {
  background: var(--td-stop);
  border-left-color: var(--td-stop-line);
}