/* theme.css — MCV dark mode.
   Build-injected into every page's <head> by inject_ui.py.
   All dark rules are scoped under html[data-theme="dark"], so they only apply
   when dark mode is active. The html[data-theme="dark"] prefix gives every
   rule higher specificity than the pages' own :root tokens and class rules,
   so load order does not matter.
   Palette: page #121212, cards #1E1E1E, text #F0F0F0, secondary #B0B0B0,
   muted #A6A6A6, borders #3A3A3A. */

/* ── Token overrides (static-page token set) ───────────────────────
   The html[data-theme="dark"] prefix is LOAD-BEARING on this block, not
   cosmetic. Pages declare their own palette in an inline <style> that sits at
   roughly line 35, i.e. AFTER the injected /theme.css link at line 8, so a
   bare `:root { --x: ... }` override here loses the cascade and silently
   changes nothing. Custom properties resolve on the element, so a later
   same-specificity declaration wins; the attribute prefix is what lifts this
   block above every page's :root. Verified rather than assumed (2026-10-10):
   an unprefixed --civic-red override measured rgb(215,40,42), i.e. the page
   value still winning; the same rule prefixed measured the dark value. Every
   token added below must therefore stay inside this prefixed block.

   Every value below was computed against the surface it actually renders on
   (dark card #1E1E1E / dark tint) and clears WCAG 4.5:1 for body text before
   being committed; none is eyeballed.
   -------------------------------------------------------------------- */
html[data-theme="dark"] {
  --gray: #121212;
  --white: #1E1E1E;
  --charcoal: #F0F0F0;
  --red-light: rgba(215, 40, 42, 0.12);
  --federal: #93C5FD;
  --federal-bg: rgba(29, 78, 216, 0.18);
  --federal-border: rgba(147, 197, 253, 0.35);
  --provincial: #86EFAC;
  --provincial-bg: rgba(21, 128, 61, 0.18);
  --provincial-border: rgba(134, 239, 172, 0.35);
  --municipal: #FCD34D;
  --municipal-bg: rgba(180, 83, 9, 0.18);
  --municipal-border: rgba(252, 211, 77, 0.35);

  /* Brand red had no dark partner at all: #D7282A on the dark card measures
     3.36:1, under the 4.5:1 body bar, and it is the single largest failure
     class site-wide (113 readable nodes). Lightened in-hue rather than
     switched, so it still reads as MCV red.

     The value is constrained from BOTH sides and is not a free pick: it must
     clear 4.5:1 written as text on the #1E1E1E card, AND stay dark enough to
     carry white button label on top of it. Those pull in opposite directions
     -- a red light enough to write on dark is too light to hold white on it --
     so the family was swept and NO single red clears 4.5:1 in both roles:
     every red dark enough to carry white text is too dark to pass as text on
     the card. Daniel resolved the collision rather than let a compromise value
     serve both badly -- the brand red stays the TEXT colour and the red-filled
     buttons take dark ink instead of white, which is what releases the red to
     the text-optimal value below. Measured, not eyeballed: #FF6070 is 5.68:1
     as text on the card and carries #121212 button ink at 6.39:1.

     Correction to an earlier figure carried here: white text on the OLD red
     #D7282A measures 4.97:1, not 2.93:1, so it already cleared the 4.5:1 body
     bar by a hair. The button-ink rule below is therefore not a contrast fix --
     it is what releases the token to the text-optimal #FF6070, because white
     on #FF6070 measures only 3.36:1. Stated plainly so nobody later "fixes" a
     2.93 that was never the real number.

     Do not re-darken this value to rescue white button labels -- that regresses
     the text contrast the value was picked for. Fix the ink, not the red. */
  --civic-red: #FF6070;
  --red: #FF6070;
  /* Recomputed against the #1E1E1E card: 7.41:1, not the 4.70 first written
     here. Comfortably clear; the earlier figure understated it. */
  --red-dark: #FF8A96;
  --civic-red-dark: #FF8A96;

  /* Body greys were light-mode values with no dark counterpart, so they were
     rendering mid-grey on near-black (#555 -> 2.6:1). */
  /* Recomputed on the #1E1E1E card -- all clear the 4.5:1 bar with room, and
     each measures higher than the figure first recorded here: body 10.44:1
     (not 8.70), muted 6.85:1 (not 6.50), soft 7.69:1 (not 5.70). */
  --text-body: #C9CDD3;
  --text-muted: #A6A6A6;
  --text-soft: #B0B0B0;
  --border-light: #3A3A3A;

  /* The tint family is the second failure class, and it is a BACKGROUND bug
     rather than a text bug. Pages already swap these tokens' TEXT to a light
     value for dark mode, but the tint stays the light-mode near-white
     (#FEF3C7 / #EFF6FF / #ECFDF5), so dark mode painted near-white text on a
     near-white box -- 1.29:1 and 1.66:1 on the Bill Center. Darkening the
     text would have fought the half that was already correct, so the tints
     are what move here: same hue family, pushed to a dark luminance that the
     existing light text clears at 9:1+. */
  --tint-amber: #3A2E10;
  --tint-blue: #101F33;
  --tint-green: #0E2A1B;

  /* Same class of defect as the tints: the level chip backgrounds were light
     values with no dark partner. Kept as translucent fills so they sit on the
     card rather than on it as a sticker. */
  --municipal-bg: rgba(180, 83, 9, 0.30);
  --federal-bg: rgba(29, 78, 216, 0.32);
  --provincial-bg: rgba(21, 128, 61, 0.30);
}

/* ── Base surfaces ──────────────────────────────────────────────── */
html[data-theme="dark"] body { background: #121212; }

/* Footer: --charcoal flips light, so pin the footer dark explicitly. */
html[data-theme="dark"] .site-footer { background: #0F0F0F; }

/* Level-color badges/dots keep their solid dark backgrounds (white text). */
html[data-theme="dark"] .badge-federal,
html[data-theme="dark"] .dot-federal { background: #1d4ed8; }
html[data-theme="dark"] .badge-provincial,
html[data-theme="dark"] .dot-provincial { background: #15803d; }
html[data-theme="dark"] .badge-municipal,
html[data-theme="dark"] .dot-municipal { background: #b45309; }

/* ── Theme toggle button ────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-left: 8px;
  background: rgba(215, 40, 42, 0.08);
  border: none; border-radius: 8px;
  cursor: pointer; transition: all 0.15s;
  color: var(--charcoal, #2E2E2E);
}
.theme-toggle:hover { background: rgba(215, 40, 42, 0.16); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .tt-sun { display: none; }
html[data-theme="dark"] .theme-toggle .tt-moon { display: none; }
html[data-theme="dark"] .theme-toggle .tt-sun { display: block; }

/* ── Nav / language toggle ──────────────────────────────────────── */
html[data-theme="dark"] .lang-btn { border-color: #3A3A3A; color: #B0B0B0; background: #1E1E1E; }
html[data-theme="dark"] .lang-btn:hover:not(.active) { background: #2A2A2A; }

/* ── Body text ──────────────────────────────────────────────────── */
html[data-theme="dark"] .article-body p,
html[data-theme="dark"] .article-body li,
html[data-theme="dark"] .origin p,
html[data-theme="dark"] .section p,
html[data-theme="dark"] .support-coda p,
html[data-theme="dark"] .privacy-item { color: #C9CDD3; }

html[data-theme="dark"] .hero p,
html[data-theme="dark"] .ref-item p,
html[data-theme="dark"] .da-lead,
html[data-theme="dark"] .da-tail,
html[data-theme="dark"] .rep-card p,
html[data-theme="dark"] .city-card p,
html[data-theme="dark"] .city-desc,
html[data-theme="dark"] .article-card .card-desc,
html[data-theme="dark"] .faq-answer,
html[data-theme="dark"] .principle p,
html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .topic-faq-item p,
html[data-theme="dark"] .accordion-item .item-desc,
html[data-theme="dark"] .article-body blockquote { color: #B0B0B0; }

html[data-theme="dark"] .meta,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .accordion-chevron { color: #A6A6A6; }

html[data-theme="dark"] .accordion-item .item-arrow,
html[data-theme="dark"] .city-arrow,
html[data-theme="dark"] .topic-arrow { color: #6B7280; }

/* ── Level-color text (tokens flip; these pin the light variants) ── */
html[data-theme="dark"] .credential-text,
html[data-theme="dark"] .source-card p,
html[data-theme="dark"] .example-federal { color: #93C5FD; }
html[data-theme="dark"] .prov-card p,
html[data-theme="dark"] .example-provincial,
html[data-theme="dark"] .review-badge { color: #86EFAC; }
html[data-theme="dark"] .muni-card p,
html[data-theme="dark"] .example-municipal { color: #FCD34D; }

/* ── Amber callouts ─────────────────────────────────────────────── */
html[data-theme="dark"] .ai-note,
html[data-theme="dark"] .highlight-box,
html[data-theme="dark"] .limitation,
html[data-theme="dark"] .overlap-note {
  background: rgba(252, 211, 77, 0.10);
  border-color: rgba(252, 211, 77, 0.35);
  color: #FCD34D;
}
html[data-theme="dark"] .highlight-box p { color: #FCD34D; }
html[data-theme="dark"] .overlap-note strong,
html[data-theme="dark"] .limitation strong { color: #FDE68A; }

/* ── Red feedback callout ───────────────────────────────────────── */
html[data-theme="dark"] .feedback { border-color: rgba(252, 165, 165, 0.4); }
html[data-theme="dark"] .feedback ul li { color: #FCA5A5; }

/* ── Borders ────────────────────────────────────────────────────── */
html[data-theme="dark"] .accordion,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .city-card,
html[data-theme="dark"] .topic-card,
html[data-theme="dark"] .topic-faq-item { border-color: #3A3A3A; }
html[data-theme="dark"] .faq-item { border-bottom-color: #3A3A3A; }
html[data-theme="dark"] .data-table td { border-bottom-color: #2A2A2A; }
html[data-theme="dark"] .sources-link-block { border-color: #3A3A3A; }
html[data-theme="dark"] .sources-link-block:hover { background: #2A2A2A; }
html[data-theme="dark"] .credential { border-color: rgba(147, 197, 253, 0.35); }
html[data-theme="dark"] .review-badge { border-color: rgba(134, 239, 172, 0.35); }

/* ── Accordion / hover surfaces ─────────────────────────────────── */
html[data-theme="dark"] .accordion-content { background: #1A1A1A; }
html[data-theme="dark"] .accordion-header:hover { background: #2A2A2A; }
html[data-theme="dark"] .cta-btn:hover { background: #2A2A2A; }

/* ── Home / 404 static shell ────────────────────────────────────── */
html[data-theme="dark"] .hero-postal-input::placeholder { color: #6B7280; }
html[data-theme="dark"] .spinner { border-color: #3A3A3A; border-top-color: var(--civic-accent); }
html[data-theme="dark"] .btn-secondary { background: rgba(147, 197, 253, 0.08); border-color: rgba(147, 197, 253, 0.25); }
html[data-theme="dark"] .footer-btn { background: rgba(147, 197, 253, 0.08); border-color: rgba(147, 197, 253, 0.2); }

/* ── Red-filled buttons: dark ink, not white ───────────────────────
   Completes the collision resolution documented on the --civic-red token
   above. The red token is now the TEXT colour; anything that FILLS with it
   carries dark ink, because no red clears 4.5:1 in both roles at once.

   The selector list is enumerated from the site, not guessed: a property-level
   scan of every inline <style> block split red-token usage into fill-role vs
   text-role and this list is the fill-role half -- 14 selectors, 151 sites,
   147 of which declared white ink in light mode.

   DELIBERATELY ABSENT: .cta-btn, .hero, .breadcrumb, .faq-question, .nav-link
   and the rest of the text-role set. Those use the red token as `color`, so
   giving them dark ink would paint red words near-black onto the dark card and
   make them disappear. Do not widen this list to "every rule that mentions
   --civic-red"; that is the exact confusion the scan was written to avoid.
   .mcv-newsletter-widget appears in BOTH roles across pages, so it is excluded
   here rather than risk the text case; it keeps its light-mode ink.

   !important is load-bearing, not stylistic: 17 of these buttons set
   color:#fff in an INLINE style="" attribute, and a style attribute outranks
   any selector regardless of specificity. Without !important those 17 keep
   white-on-red and the rest of the list silently diverges from them. */
html[data-theme="dark"] .nav-cta,
html[data-theme="dark"] .lang-btn.active,
html[data-theme="dark"] .cta,
html[data-theme="dark"] .cta h2,
html[data-theme="dark"] .section-dark,
html[data-theme="dark"] .btn-quiz,
html[data-theme="dark"] .next-btn,
html[data-theme="dark"] .results-cta-primary,
html[data-theme="dark"] .postal-btn,
html[data-theme="dark"] .submit-btn {
  color: #121212 !important;
}