/*!
 * 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: #f7f2e9;
  --bg-elev: #fffdf8;
  --bg-soft: #efe7d9;
  --card: #fffdf8;
  --card-2: #f3ece0;
  --border: #e0d5c3;
  --border-strong: #c4b49c;
  --divider: #e7ddcd;
  --text: #241c12;
  --text-dim: #5b4d3c;
  --text-mute: #857257;
  --accent: #c2551f;
  --accent-strong: #a3420f;
  --accent-2: #4f7534;
  --accent-2-strong: #3d5c27;
  --accent-soft: rgba(194, 85, 31, 0.12);
  --accent-2-soft: rgba(79, 117, 52, 0.12);
  --accent-soft-ink: #7a3410;
  --accent-ink: #ffffff;
  --star: #c98a00;
  --star-off: var(--border-strong);
  --success: #4f7534;
  --success-soft: rgba(79, 117, 52, 0.12);
  --success-soft-ink: #2f4a1d;
  --warn: #a06a12;
  --warn-soft: rgba(160, 106, 18, 0.12);
  --warn-soft-ink: #6b4708;
  --danger: #b8352f;
  --danger-soft: rgba(184, 53, 47, 0.1);
  --danger-soft-ink: #7d211c;
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 10px;
  --radius-pill: 4px;
  --shadow: 0 6px 18px rgba(90, 70, 40, 0.12);
  --shadow-lg: 0 20px 50px rgba(90, 70, 40, 0.16);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 20px rgba(90, 70, 40, 0.09);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --maxw: 480px;
  --header-h: 52px;
  --search-h: 54px;
  --tap: 44px;
  --gutter: 16px;
  --pct: 0%;
  --focus: #c2551f;
  --focus-halo: rgba(194, 85, 31, 0.25);
  --scrim: rgba(36, 28, 18, 0.45);
  --header-bg: rgba(247, 242, 233, 0.9);
  --footer-bg: #efe7d9;
  --chip-bg: rgba(36, 28, 18, 0.05);
  --ad-border: #ded2bd;
  --ad-bg: rgba(36, 28, 18, 0.02);
  --ad-label: #857257;
  --cover-veil: linear-gradient(to bottom, rgba(36, 28, 18, 0.28), rgba(36, 28, 18, 0) 45%);
  --hero-glow: radial-gradient(120% 80% at 50% 0%, rgba(194, 85, 31, 0.12), rgba(79, 117, 52, 0) 72%);
}

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

  --bg: #14100c;
  --bg-elev: #1d1712;
  --bg-soft: #251e17;
  --card: #1c1611;
  --card-2: #262018;
  --border: #372d22;
  --border-strong: #4d4030;
  --divider: #2e2619;
  --text: #f6efe4;
  --text-dim: #d3c7b4;
  --text-mute: #a2937d;
  --accent: #e2703a;
  --accent-strong: #c2551f;
  --accent-2: #7ba05b;
  --accent-2-strong: #5d8241;
  --accent-soft: rgba(226, 112, 58, 0.16);
  --accent-2-soft: rgba(123, 160, 91, 0.14);
  --accent-soft-ink: #f7d9c6;
  --accent-ink: #ffffff;
  --star: #f0b429;
  --star-off: var(--border-strong);
  --success: #86b06a;
  --success-soft: rgba(134, 176, 106, 0.14);
  --success-soft-ink: #d3e8c4;
  --warn: #e0a33c;
  --warn-soft: rgba(224, 163, 60, 0.14);
  --warn-soft-ink: #f6e2b4;
  --danger: #d9534f;
  --danger-soft: rgba(217, 83, 79, 0.14);
  --danger-soft-ink: #f6cfce;
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 10px;
  --radius-pill: 4px;
  --shadow: 0 6px 18px rgba(20, 12, 4, 0.45);
  --shadow-lg: 0 20px 50px rgba(20, 12, 4, 0.55);
  --shadow-card: 0 1px 0 rgba(255, 240, 220, 0.03), 0 8px 24px rgba(20, 12, 4, 0.38);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --maxw: 480px;
  --header-h: 52px;
  --search-h: 54px;
  --tap: 44px;
  --gutter: 16px;
  --pct: 0%;
  --focus: #f0a868;
  --focus-halo: rgba(240, 168, 104, 0.3);
  --scrim: rgba(18, 12, 6, 0.62);
  --header-bg: rgba(22, 17, 11, 0.86);
  --footer-bg: #171209;
  --chip-bg: rgba(255, 245, 230, 0.06);
  --ad-border: #3a3024;
  --ad-bg: rgba(255, 245, 230, 0.025);
  --ad-label: #a2937d;
  --cover-veil: linear-gradient(to bottom, rgba(20, 12, 4, 0.5), rgba(20, 12, 4, 0) 45%);
  --hero-glow: radial-gradient(120% 80% at 50% 0%, rgba(226, 112, 58, 0.18), rgba(123, 160, 91, 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: #f7f2e9;
  --bg-elev: #fffdf8;
  --bg-soft: #efe7d9;
  --card: #fffdf8;
  --card-2: #f3ece0;
  --border: #e0d5c3;
  --border-strong: #c4b49c;
  --divider: #e7ddcd;
  --text: #241c12;
  --text-dim: #5b4d3c;
  --text-mute: #857257;
  --accent: #c2551f;
  --accent-strong: #a3420f;
  --accent-2: #4f7534;
  --accent-2-strong: #3d5c27;
  --accent-soft: rgba(194, 85, 31, 0.12);
  --accent-2-soft: rgba(79, 117, 52, 0.12);
  --accent-soft-ink: #7a3410;
  --accent-ink: #ffffff;
  --star: #c98a00;
  --star-off: var(--border-strong);
  --success: #4f7534;
  --success-soft: rgba(79, 117, 52, 0.12);
  --success-soft-ink: #2f4a1d;
  --warn: #a06a12;
  --warn-soft: rgba(160, 106, 18, 0.12);
  --warn-soft-ink: #6b4708;
  --danger: #b8352f;
  --danger-soft: rgba(184, 53, 47, 0.1);
  --danger-soft-ink: #7d211c;
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 10px;
  --radius-pill: 4px;
  --shadow: 0 6px 18px rgba(90, 70, 40, 0.12);
  --shadow-lg: 0 20px 50px rgba(90, 70, 40, 0.16);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 20px rgba(90, 70, 40, 0.09);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --maxw: 480px;
  --header-h: 52px;
  --search-h: 54px;
  --tap: 44px;
  --gutter: 16px;
  --pct: 0%;
  --focus: #c2551f;
  --focus-halo: rgba(194, 85, 31, 0.25);
  --scrim: rgba(36, 28, 18, 0.45);
  --header-bg: rgba(247, 242, 233, 0.9);
  --footer-bg: #efe7d9;
  --chip-bg: rgba(36, 28, 18, 0.05);
  --ad-border: #ded2bd;
  --ad-bg: rgba(36, 28, 18, 0.02);
  --ad-label: #857257;
  --cover-veil: linear-gradient(to bottom, rgba(36, 28, 18, 0.28), rgba(36, 28, 18, 0) 45%);
  --hero-glow: radial-gradient(120% 80% at 50% 0%, rgba(194, 85, 31, 0.12), rgba(79, 117, 52, 0) 72%);
  }
}

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

  --bg: #14100c;
  --bg-elev: #1d1712;
  --bg-soft: #251e17;
  --card: #1c1611;
  --card-2: #262018;
  --border: #372d22;
  --border-strong: #4d4030;
  --divider: #2e2619;
  --text: #f6efe4;
  --text-dim: #d3c7b4;
  --text-mute: #a2937d;
  --accent: #e2703a;
  --accent-strong: #c2551f;
  --accent-2: #7ba05b;
  --accent-2-strong: #5d8241;
  --accent-soft: rgba(226, 112, 58, 0.16);
  --accent-2-soft: rgba(123, 160, 91, 0.14);
  --accent-soft-ink: #f7d9c6;
  --accent-ink: #ffffff;
  --star: #f0b429;
  --star-off: var(--border-strong);
  --success: #86b06a;
  --success-soft: rgba(134, 176, 106, 0.14);
  --success-soft-ink: #d3e8c4;
  --warn: #e0a33c;
  --warn-soft: rgba(224, 163, 60, 0.14);
  --warn-soft-ink: #f6e2b4;
  --danger: #d9534f;
  --danger-soft: rgba(217, 83, 79, 0.14);
  --danger-soft-ink: #f6cfce;
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 10px;
  --radius-pill: 4px;
  --shadow: 0 6px 18px rgba(20, 12, 4, 0.45);
  --shadow-lg: 0 20px 50px rgba(20, 12, 4, 0.55);
  --shadow-card: 0 1px 0 rgba(255, 240, 220, 0.03), 0 8px 24px rgba(20, 12, 4, 0.38);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --maxw: 480px;
  --header-h: 52px;
  --search-h: 54px;
  --tap: 44px;
  --gutter: 16px;
  --pct: 0%;
  --focus: #f0a868;
  --focus-halo: rgba(240, 168, 104, 0.3);
  --scrim: rgba(18, 12, 6, 0.62);
  --header-bg: rgba(22, 17, 11, 0.86);
  --footer-bg: #171209;
  --chip-bg: rgba(255, 245, 230, 0.06);
  --ad-border: #3a3024;
  --ad-bg: rgba(255, 245, 230, 0.025);
  --ad-label: #a2937d;
  --cover-veil: linear-gradient(to bottom, rgba(20, 12, 4, 0.5), rgba(20, 12, 4, 0) 45%);
  --hero-glow: radial-gradient(120% 80% at 50% 0%, rgba(226, 112, 58, 0.18), rgba(123, 160, 91, 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: #f7f2e9;
  --bg-elev: #fffdf8;
  --bg-soft: #efe7d9;
  --card: #fffdf8;
  --card-2: #f3ece0;
  --border: #e0d5c3;
  --border-strong: #c4b49c;
  --divider: #e7ddcd;
  --text: #241c12;
  --text-dim: #5b4d3c;
  --text-mute: #857257;
  --accent: #c2551f;
  --accent-strong: #a3420f;
  --accent-2: #4f7534;
  --accent-2-strong: #3d5c27;
  --accent-soft: rgba(194, 85, 31, 0.12);
  --accent-2-soft: rgba(79, 117, 52, 0.12);
  --accent-soft-ink: #7a3410;
  --accent-ink: #ffffff;
  --star: #c98a00;
  --star-off: var(--border-strong);
  --success: #4f7534;
  --success-soft: rgba(79, 117, 52, 0.12);
  --success-soft-ink: #2f4a1d;
  --warn: #a06a12;
  --warn-soft: rgba(160, 106, 18, 0.12);
  --warn-soft-ink: #6b4708;
  --danger: #b8352f;
  --danger-soft: rgba(184, 53, 47, 0.1);
  --danger-soft-ink: #7d211c;
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 10px;
  --radius-pill: 4px;
  --shadow: 0 6px 18px rgba(90, 70, 40, 0.12);
  --shadow-lg: 0 20px 50px rgba(90, 70, 40, 0.16);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 20px rgba(90, 70, 40, 0.09);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --maxw: 480px;
  --header-h: 52px;
  --search-h: 54px;
  --tap: 44px;
  --gutter: 16px;
  --pct: 0%;
  --focus: #c2551f;
  --focus-halo: rgba(194, 85, 31, 0.25);
  --scrim: rgba(36, 28, 18, 0.45);
  --header-bg: rgba(247, 242, 233, 0.9);
  --footer-bg: #efe7d9;
  --chip-bg: rgba(36, 28, 18, 0.05);
  --ad-border: #ded2bd;
  --ad-bg: rgba(36, 28, 18, 0.02);
  --ad-label: #857257;
  --cover-veil: linear-gradient(to bottom, rgba(36, 28, 18, 0.28), rgba(36, 28, 18, 0) 45%);
  --hero-glow: radial-gradient(120% 80% at 50% 0%, rgba(194, 85, 31, 0.12), rgba(79, 117, 52, 0) 72%);
}