/*!
 * NorthFiveFun — light theme
 * ---------------------------------------------------------------------------
 * Light is a designed theme, not an inverted dark theme: cool paper
 * white surfaces, deep indigo ink, a violet accent that keeps its
 * identity and a teal-cyan secondary that stays readable on white.
 * Shadows soften, borders cool, and the neon glow of the dark theme
 * becomes a faint violet wash.
 *
 * This file ONLY defines CSS custom properties (plus `color-scheme`, which has
 * to travel with the palette so native form controls and scrollbars match).
 * All layout lives in assets/css/main.css.
 *
 * Both theme files declare the SAME set of custom properties, so switching
 * themes can never leave an undefined var. Every variable listed in
 * CONTRACT.md §5 is present here.
 *
 * HOW THE SWITCH WORKS
 * --------------------
 * The theme <link> elements carry `title="dark"` / `title="light"`, which
 * makes them ALTERNATIVE stylesheets: the browser applies exactly one of
 * them and leaves the other inert (it still shows up in
 * `document.styleSheets`, but its rules do not apply). Which one wins depends
 * on which link's `disabled` flag changed last.
 *
 * Therefore this file declares both palettes:
 *   1. its own palette as the default,
 *   2. the opposite palette behind the `<html data-theme="...">` hook,
 *   3. both palettes for `data-theme="system"` (follows prefers-color-scheme).
 *
 * The JS agent should set `data-theme` on <html> to "dark" | "light" |
 * "system" and toggle `disabled` on the two theme links. Setting
 * `data-theme` is what makes the switch deterministic; the link toggle only
 * decides which sheet the browser keeps alive.
 */

/* --------------------------------------------------------------------------
   1. Light palette — default
   --------------------------------------------------------------------------
   This sheet only becomes the active stylesheet when the dark one is
   disabled, so "light by default" is exactly right here. `:where()` keeps
   this rule's specificity below the dark sheet's default so dark still wins
   if a browser applies both at once.
   -------------------------------------------------------------------------- */
:where(:root):not([data-theme="dark"]) {
  color-scheme: light;

  --bg: #faf6ee;
  --bg-elev: #fffdf8;
  --bg-soft: #f2ecdf;
  --card: #fffdf8;
  --card-2: #f4eee2;
  --border: #ded4c0;
  --border-strong: #b9ab8f;
  --divider: #e6ddca;
  --text: #171310;
  --text-dim: #4a4137;
  --text-mute: #7a6e5c;
  --accent: #9b2226;
  --accent-strong: #7d1a1d;
  --accent-2: #1f5673;
  --accent-2-strong: #164257;
  --accent-soft: rgba(155, 34, 38, 0.1);
  --accent-2-soft: rgba(31, 86, 115, 0.1);
  --accent-soft-ink: #7d1a1d;
  --accent-ink: #fffdf8;
  --star: #a8760c;
  --star-off: var(--border-strong);
  --success: #2f6b3a;
  --success-soft: rgba(47, 107, 58, 0.1);
  --success-soft-ink: #24512d;
  --warn: #8a5a08;
  --warn-soft: rgba(138, 90, 8, 0.1);
  --warn-soft-ink: #6b4708;
  --danger: #9b2226;
  --danger-soft: rgba(155, 34, 38, 0.1);
  --danger-soft-ink: #7d1a1d;
  --radius: 2px;
  --radius-sm: 2px;
  --radius-lg: 3px;
  --radius-pill: 2px;
  --shadow: 0 1px 2px rgba(60, 45, 25, 0.1);
  --shadow-lg: 0 10px 26px rgba(60, 45, 25, 0.14);
  --shadow-card: none;
  --font: Charter, "Bitstream Charter", "Iowan Old Style", Palatino, Georgia, "Times New Roman", serif;
  --font-display: "Arial Narrow", "Avenir Next Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --maxw: 480px;
  --header-h: 52px;
  --search-h: 54px;
  --tap: 44px;
  --gutter: 16px;
  --pct: 0%;
  --focus: #9b2226;
  --focus-halo: rgba(155, 34, 38, 0.25);
  --scrim: rgba(23, 19, 16, 0.45);
  --header-bg: rgba(250, 246, 238, 0.93);
  --footer-bg: #f2ecdf;
  --chip-bg: rgba(23, 19, 16, 0.05);
  --ad-border: #ded4c0;
  --ad-bg: rgba(23, 19, 16, 0.015);
  --ad-label: #7a6e5c;
  --cover-veil: linear-gradient(to bottom, rgba(23, 19, 16, 0.22), rgba(23, 19, 16, 0) 45%);
  --hero-glow: radial-gradient(120% 80% at 50% 0%, rgba(155, 34, 38, 0.1), rgba(31, 86, 115, 0) 72%);
}

/* --------------------------------------------------------------------------
   2. Dark palette — `<html data-theme="dark">`
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #16131a;
  --bg-elev: #1e1a22;
  --bg-soft: #262129;
  --card: #1c1820;
  --card-2: #262029;
  --border: #332d39;
  --border-strong: #4a4250;
  --divider: #2c2732;
  --text: #f4efe6;
  --text-dim: #d0c7b8;
  --text-mute: #9b9184;
  --accent: #e05a4f;
  --accent-strong: #c6453b;
  --accent-2: #d9a441;
  --accent-2-strong: #b8862c;
  --accent-soft: rgba(224, 90, 79, 0.16);
  --accent-2-soft: rgba(217, 164, 65, 0.14);
  --accent-soft-ink: #f7c8c2;
  --accent-ink: #1a0f10;
  --star: #e0b64b;
  --star-off: var(--border-strong);
  --success: #7fae6a;
  --success-soft: rgba(127, 174, 106, 0.14);
  --success-soft-ink: #d3e8c4;
  --warn: #dda64a;
  --warn-soft: rgba(221, 166, 74, 0.14);
  --warn-soft-ink: #f6e2b4;
  --danger: #e05a4f;
  --danger-soft: rgba(224, 90, 79, 0.14);
  --danger-soft-ink: #f6cfce;
  --radius: 2px;
  --radius-sm: 2px;
  --radius-lg: 3px;
  --radius-pill: 2px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-card: none;
  --font: Charter, "Bitstream Charter", "Iowan Old Style", Palatino, Georgia, "Times New Roman", serif;
  --font-display: "Arial Narrow", "Avenir Next Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --maxw: 480px;
  --header-h: 52px;
  --search-h: 54px;
  --tap: 44px;
  --gutter: 16px;
  --pct: 0%;
  --focus: #e0b64b;
  --focus-halo: rgba(224, 182, 75, 0.3);
  --scrim: rgba(10, 8, 12, 0.62);
  --header-bg: rgba(22, 19, 26, 0.9);
  --footer-bg: #1a161d;
  --chip-bg: rgba(255, 245, 230, 0.06);
  --ad-border: #332d39;
  --ad-bg: rgba(255, 245, 230, 0.02);
  --ad-label: #9b9184;
  --cover-veil: linear-gradient(to bottom, rgba(10, 8, 12, 0.45), rgba(10, 8, 12, 0) 45%);
  --hero-glow: radial-gradient(120% 80% at 50% 0%, rgba(224, 90, 79, 0.16), rgba(217, 164, 65, 0) 72%);
}

/* --------------------------------------------------------------------------
   3. System — `<html data-theme="system">` follows the OS preference
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    color-scheme: light;

  --bg: #faf6ee;
  --bg-elev: #fffdf8;
  --bg-soft: #f2ecdf;
  --card: #fffdf8;
  --card-2: #f4eee2;
  --border: #ded4c0;
  --border-strong: #b9ab8f;
  --divider: #e6ddca;
  --text: #171310;
  --text-dim: #4a4137;
  --text-mute: #7a6e5c;
  --accent: #9b2226;
  --accent-strong: #7d1a1d;
  --accent-2: #1f5673;
  --accent-2-strong: #164257;
  --accent-soft: rgba(155, 34, 38, 0.1);
  --accent-2-soft: rgba(31, 86, 115, 0.1);
  --accent-soft-ink: #7d1a1d;
  --accent-ink: #fffdf8;
  --star: #a8760c;
  --star-off: var(--border-strong);
  --success: #2f6b3a;
  --success-soft: rgba(47, 107, 58, 0.1);
  --success-soft-ink: #24512d;
  --warn: #8a5a08;
  --warn-soft: rgba(138, 90, 8, 0.1);
  --warn-soft-ink: #6b4708;
  --danger: #9b2226;
  --danger-soft: rgba(155, 34, 38, 0.1);
  --danger-soft-ink: #7d1a1d;
  --radius: 2px;
  --radius-sm: 2px;
  --radius-lg: 3px;
  --radius-pill: 2px;
  --shadow: 0 1px 2px rgba(60, 45, 25, 0.1);
  --shadow-lg: 0 10px 26px rgba(60, 45, 25, 0.14);
  --shadow-card: none;
  --font: Charter, "Bitstream Charter", "Iowan Old Style", Palatino, Georgia, "Times New Roman", serif;
  --font-display: "Arial Narrow", "Avenir Next Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --maxw: 480px;
  --header-h: 52px;
  --search-h: 54px;
  --tap: 44px;
  --gutter: 16px;
  --pct: 0%;
  --focus: #9b2226;
  --focus-halo: rgba(155, 34, 38, 0.25);
  --scrim: rgba(23, 19, 16, 0.45);
  --header-bg: rgba(250, 246, 238, 0.93);
  --footer-bg: #f2ecdf;
  --chip-bg: rgba(23, 19, 16, 0.05);
  --ad-border: #ded4c0;
  --ad-bg: rgba(23, 19, 16, 0.015);
  --ad-label: #7a6e5c;
  --cover-veil: linear-gradient(to bottom, rgba(23, 19, 16, 0.22), rgba(23, 19, 16, 0) 45%);
  --hero-glow: radial-gradient(120% 80% at 50% 0%, rgba(155, 34, 38, 0.1), rgba(31, 86, 115, 0) 72%);
  }
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;

  --bg: #16131a;
  --bg-elev: #1e1a22;
  --bg-soft: #262129;
  --card: #1c1820;
  --card-2: #262029;
  --border: #332d39;
  --border-strong: #4a4250;
  --divider: #2c2732;
  --text: #f4efe6;
  --text-dim: #d0c7b8;
  --text-mute: #9b9184;
  --accent: #e05a4f;
  --accent-strong: #c6453b;
  --accent-2: #d9a441;
  --accent-2-strong: #b8862c;
  --accent-soft: rgba(224, 90, 79, 0.16);
  --accent-2-soft: rgba(217, 164, 65, 0.14);
  --accent-soft-ink: #f7c8c2;
  --accent-ink: #1a0f10;
  --star: #e0b64b;
  --star-off: var(--border-strong);
  --success: #7fae6a;
  --success-soft: rgba(127, 174, 106, 0.14);
  --success-soft-ink: #d3e8c4;
  --warn: #dda64a;
  --warn-soft: rgba(221, 166, 74, 0.14);
  --warn-soft-ink: #f6e2b4;
  --danger: #e05a4f;
  --danger-soft: rgba(224, 90, 79, 0.14);
  --danger-soft-ink: #f6cfce;
  --radius: 2px;
  --radius-sm: 2px;
  --radius-lg: 3px;
  --radius-pill: 2px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-card: none;
  --font: Charter, "Bitstream Charter", "Iowan Old Style", Palatino, Georgia, "Times New Roman", serif;
  --font-display: "Arial Narrow", "Avenir Next Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --maxw: 480px;
  --header-h: 52px;
  --search-h: 54px;
  --tap: 44px;
  --gutter: 16px;
  --pct: 0%;
  --focus: #e0b64b;
  --focus-halo: rgba(224, 182, 75, 0.3);
  --scrim: rgba(10, 8, 12, 0.62);
  --header-bg: rgba(22, 19, 26, 0.9);
  --footer-bg: #1a161d;
  --chip-bg: rgba(255, 245, 230, 0.06);
  --ad-border: #332d39;
  --ad-bg: rgba(255, 245, 230, 0.02);
  --ad-label: #9b9184;
  --cover-veil: linear-gradient(to bottom, rgba(10, 8, 12, 0.45), rgba(10, 8, 12, 0) 45%);
  --hero-glow: radial-gradient(120% 80% at 50% 0%, rgba(224, 90, 79, 0.16), rgba(217, 164, 65, 0) 72%);
  }
}

/* --------------------------------------------------------------------------
   4. Link-disabled fallback
   --------------------------------------------------------------------------
   The light sheet is the one the browser keeps alive once the dark
   stylesheet is disabled. This rule makes that explicit: if the dark
   stylesheet is switched off and nothing says otherwise, light wins.
   -------------------------------------------------------------------------- */
html:has(link[rel="stylesheet"][href$="theme-dark.css"][disabled]):not([data-theme="dark"]):not([data-theme="system"]) {
  color-scheme: light;

  --bg: #faf6ee;
  --bg-elev: #fffdf8;
  --bg-soft: #f2ecdf;
  --card: #fffdf8;
  --card-2: #f4eee2;
  --border: #ded4c0;
  --border-strong: #b9ab8f;
  --divider: #e6ddca;
  --text: #171310;
  --text-dim: #4a4137;
  --text-mute: #7a6e5c;
  --accent: #9b2226;
  --accent-strong: #7d1a1d;
  --accent-2: #1f5673;
  --accent-2-strong: #164257;
  --accent-soft: rgba(155, 34, 38, 0.1);
  --accent-2-soft: rgba(31, 86, 115, 0.1);
  --accent-soft-ink: #7d1a1d;
  --accent-ink: #fffdf8;
  --star: #a8760c;
  --star-off: var(--border-strong);
  --success: #2f6b3a;
  --success-soft: rgba(47, 107, 58, 0.1);
  --success-soft-ink: #24512d;
  --warn: #8a5a08;
  --warn-soft: rgba(138, 90, 8, 0.1);
  --warn-soft-ink: #6b4708;
  --danger: #9b2226;
  --danger-soft: rgba(155, 34, 38, 0.1);
  --danger-soft-ink: #7d1a1d;
  --radius: 2px;
  --radius-sm: 2px;
  --radius-lg: 3px;
  --radius-pill: 2px;
  --shadow: 0 1px 2px rgba(60, 45, 25, 0.1);
  --shadow-lg: 0 10px 26px rgba(60, 45, 25, 0.14);
  --shadow-card: none;
  --font: Charter, "Bitstream Charter", "Iowan Old Style", Palatino, Georgia, "Times New Roman", serif;
  --font-display: "Arial Narrow", "Avenir Next Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --maxw: 480px;
  --header-h: 52px;
  --search-h: 54px;
  --tap: 44px;
  --gutter: 16px;
  --pct: 0%;
  --focus: #9b2226;
  --focus-halo: rgba(155, 34, 38, 0.25);
  --scrim: rgba(23, 19, 16, 0.45);
  --header-bg: rgba(250, 246, 238, 0.93);
  --footer-bg: #f2ecdf;
  --chip-bg: rgba(23, 19, 16, 0.05);
  --ad-border: #ded4c0;
  --ad-bg: rgba(23, 19, 16, 0.015);
  --ad-label: #7a6e5c;
  --cover-veil: linear-gradient(to bottom, rgba(23, 19, 16, 0.22), rgba(23, 19, 16, 0) 45%);
  --hero-glow: radial-gradient(120% 80% at 50% 0%, rgba(155, 34, 38, 0.1), rgba(31, 86, 115, 0) 72%);
}