/*!
 * 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: #f6f6fb;
  --bg-elev: #ffffff;
  --bg-soft: #eeeef7;
  --card: #ffffff;
  --card-2: #f2f2fa;
  --border: #e2e2ef;
  --border-strong: #c3c5da;
  --divider: #e7e8f2;
  --text: #14142a;
  --text-dim: #464663;
  --text-mute: #696a8a;
  --accent: #6d28d9;
  --accent-strong: #6d28d9;
  --accent-2: #0e7490;
  --accent-2-strong: #4f46e5;
  --accent-soft: rgba(109, 40, 217, 0.10);
  --accent-2-soft: rgba(14, 116, 144, 0.10);
  --accent-soft-ink: #5b21b6;
  --accent-ink: #ffffff;
  --star: #b45309;
  --star-off: var(--border-strong);
  --success: #047857;
  --success-soft: rgba(4, 120, 87, 0.10);
  --success-soft-ink: #065f46;
  --warn: #b45309;
  --warn-soft: rgba(180, 83, 9, 0.12);
  --warn-soft-ink: #92400e;
  --danger: #be123c;
  --danger-soft: rgba(190, 18, 60, 0.10);
  --danger-soft-ink: #9f1239;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow: 0 6px 18px rgba(23, 23, 58, 0.10);
  --shadow-lg: 0 20px 50px rgba(23, 23, 58, 0.16);
  --shadow-card: 0 1px 2px rgba(23, 23, 58, 0.06), 0 10px 26px rgba(23, 23, 58, 0.07);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --maxw: 480px;
  --header-h: 52px;
  --search-h: 54px;
  --tap: 44px;
  --gutter: 16px;
  --pct: 0%;
  --focus: #4338ca;
  --focus-halo: rgba(109, 40, 217, 0.25);
  --scrim: rgba(18, 18, 38, 0.45);
  --header-bg: rgba(255, 255, 255, 0.88);
  --footer-bg: #fbfbfe;
  --chip-bg: rgba(20, 20, 42, 0.04);
  --ad-border: #d5d7e6;
  --ad-bg: rgba(20, 20, 42, 0.02);
  --ad-label: #6a6b8a;
  --cover-veil: linear-gradient(to bottom, rgba(16, 16, 40, 0.28), rgba(16, 16, 40, 0) 42%);
  --hero-glow: radial-gradient(120% 80% at 50% 0%, rgba(109, 40, 217, 0.12), rgba(14, 116, 144, 0) 70%);
}

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

  --bg: #07070f;
  --bg-elev: #0e0e1a;
  --bg-soft: #151527;
  --card: #121221;
  --card-2: #1b1b30;
  --border: #26263e;
  --border-strong: #3a3a5c;
  --divider: #21213a;
  --text: #f3f3fa;
  --text-dim: #bcbcd2;
  --text-mute: #8c8ca8;
  --accent: #8b5cf6;
  --accent-strong: #7c3aed;
  --accent-2: #22d3ee;
  --accent-2-strong: #4f46e5;
  --accent-soft: rgba(139, 92, 246, 0.16);
  --accent-2-soft: rgba(34, 211, 238, 0.14);
  --accent-soft-ink: #e9e4ff;
  --accent-ink: #ffffff;
  --star: #ffc53d;
  --star-off: var(--border-strong);
  --success: #3ddc97;
  --success-soft: rgba(61, 220, 151, 0.14);
  --success-soft-ink: #a7f3d0;
  --warn: #ffb020;
  --warn-soft: rgba(255, 176, 32, 0.14);
  --warn-soft-ink: #fde68a;
  --danger: #ff6b81;
  --danger-soft: rgba(255, 107, 129, 0.14);
  --danger-soft-ink: #fecdd3;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow: 0 8px 22px rgba(2, 2, 10, 0.5);
  --shadow-lg: 0 22px 60px rgba(2, 2, 10, 0.62);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 30px rgba(2, 2, 10, 0.45);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --maxw: 480px;
  --header-h: 52px;
  --search-h: 54px;
  --tap: 44px;
  --gutter: 16px;
  --pct: 0%;
  --focus: #7ee7f5;
  --focus-halo: rgba(34, 211, 238, 0.32);
  --scrim: rgba(4, 4, 12, 0.66);
  --header-bg: rgba(8, 8, 17, 0.82);
  --footer-bg: #0b0b16;
  --chip-bg: rgba(255, 255, 255, 0.05);
  --ad-border: #2c2c46;
  --ad-bg: rgba(255, 255, 255, 0.02);
  --ad-label: #8c8ca8;
  --cover-veil: linear-gradient(to bottom, rgba(4, 4, 12, 0.55), rgba(4, 4, 12, 0) 42%);
  --hero-glow: radial-gradient(120% 80% at 50% 0%, rgba(139, 92, 246, 0.22), rgba(34, 211, 238, 0) 70%);
}

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

  --bg: #f6f6fb;
  --bg-elev: #ffffff;
  --bg-soft: #eeeef7;
  --card: #ffffff;
  --card-2: #f2f2fa;
  --border: #e2e2ef;
  --border-strong: #c3c5da;
  --divider: #e7e8f2;
  --text: #14142a;
  --text-dim: #464663;
  --text-mute: #696a8a;
  --accent: #6d28d9;
  --accent-strong: #6d28d9;
  --accent-2: #0e7490;
  --accent-2-strong: #4f46e5;
  --accent-soft: rgba(109, 40, 217, 0.10);
  --accent-2-soft: rgba(14, 116, 144, 0.10);
  --accent-soft-ink: #5b21b6;
  --accent-ink: #ffffff;
  --star: #b45309;
  --star-off: var(--border-strong);
  --success: #047857;
  --success-soft: rgba(4, 120, 87, 0.10);
  --success-soft-ink: #065f46;
  --warn: #b45309;
  --warn-soft: rgba(180, 83, 9, 0.12);
  --warn-soft-ink: #92400e;
  --danger: #be123c;
  --danger-soft: rgba(190, 18, 60, 0.10);
  --danger-soft-ink: #9f1239;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow: 0 6px 18px rgba(23, 23, 58, 0.10);
  --shadow-lg: 0 20px 50px rgba(23, 23, 58, 0.16);
  --shadow-card: 0 1px 2px rgba(23, 23, 58, 0.06), 0 10px 26px rgba(23, 23, 58, 0.07);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --maxw: 480px;
  --header-h: 52px;
  --search-h: 54px;
  --tap: 44px;
  --gutter: 16px;
  --pct: 0%;
  --focus: #4338ca;
  --focus-halo: rgba(109, 40, 217, 0.25);
  --scrim: rgba(18, 18, 38, 0.45);
  --header-bg: rgba(255, 255, 255, 0.88);
  --footer-bg: #fbfbfe;
  --chip-bg: rgba(20, 20, 42, 0.04);
  --ad-border: #d5d7e6;
  --ad-bg: rgba(20, 20, 42, 0.02);
  --ad-label: #6a6b8a;
  --cover-veil: linear-gradient(to bottom, rgba(16, 16, 40, 0.28), rgba(16, 16, 40, 0) 42%);
  --hero-glow: radial-gradient(120% 80% at 50% 0%, rgba(109, 40, 217, 0.12), rgba(14, 116, 144, 0) 70%);
  }
}

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

  --bg: #07070f;
  --bg-elev: #0e0e1a;
  --bg-soft: #151527;
  --card: #121221;
  --card-2: #1b1b30;
  --border: #26263e;
  --border-strong: #3a3a5c;
  --divider: #21213a;
  --text: #f3f3fa;
  --text-dim: #bcbcd2;
  --text-mute: #8c8ca8;
  --accent: #8b5cf6;
  --accent-strong: #7c3aed;
  --accent-2: #22d3ee;
  --accent-2-strong: #4f46e5;
  --accent-soft: rgba(139, 92, 246, 0.16);
  --accent-2-soft: rgba(34, 211, 238, 0.14);
  --accent-soft-ink: #e9e4ff;
  --accent-ink: #ffffff;
  --star: #ffc53d;
  --star-off: var(--border-strong);
  --success: #3ddc97;
  --success-soft: rgba(61, 220, 151, 0.14);
  --success-soft-ink: #a7f3d0;
  --warn: #ffb020;
  --warn-soft: rgba(255, 176, 32, 0.14);
  --warn-soft-ink: #fde68a;
  --danger: #ff6b81;
  --danger-soft: rgba(255, 107, 129, 0.14);
  --danger-soft-ink: #fecdd3;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow: 0 8px 22px rgba(2, 2, 10, 0.5);
  --shadow-lg: 0 22px 60px rgba(2, 2, 10, 0.62);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 30px rgba(2, 2, 10, 0.45);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --maxw: 480px;
  --header-h: 52px;
  --search-h: 54px;
  --tap: 44px;
  --gutter: 16px;
  --pct: 0%;
  --focus: #7ee7f5;
  --focus-halo: rgba(34, 211, 238, 0.32);
  --scrim: rgba(4, 4, 12, 0.66);
  --header-bg: rgba(8, 8, 17, 0.82);
  --footer-bg: #0b0b16;
  --chip-bg: rgba(255, 255, 255, 0.05);
  --ad-border: #2c2c46;
  --ad-bg: rgba(255, 255, 255, 0.02);
  --ad-label: #8c8ca8;
  --cover-veil: linear-gradient(to bottom, rgba(4, 4, 12, 0.55), rgba(4, 4, 12, 0) 42%);
  --hero-glow: radial-gradient(120% 80% at 50% 0%, rgba(139, 92, 246, 0.22), rgba(34, 211, 238, 0) 70%);
  }
}

/* --------------------------------------------------------------------------
   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: #f6f6fb;
  --bg-elev: #ffffff;
  --bg-soft: #eeeef7;
  --card: #ffffff;
  --card-2: #f2f2fa;
  --border: #e2e2ef;
  --border-strong: #c3c5da;
  --divider: #e7e8f2;
  --text: #14142a;
  --text-dim: #464663;
  --text-mute: #696a8a;
  --accent: #6d28d9;
  --accent-strong: #6d28d9;
  --accent-2: #0e7490;
  --accent-2-strong: #4f46e5;
  --accent-soft: rgba(109, 40, 217, 0.10);
  --accent-2-soft: rgba(14, 116, 144, 0.10);
  --accent-soft-ink: #5b21b6;
  --accent-ink: #ffffff;
  --star: #b45309;
  --star-off: var(--border-strong);
  --success: #047857;
  --success-soft: rgba(4, 120, 87, 0.10);
  --success-soft-ink: #065f46;
  --warn: #b45309;
  --warn-soft: rgba(180, 83, 9, 0.12);
  --warn-soft-ink: #92400e;
  --danger: #be123c;
  --danger-soft: rgba(190, 18, 60, 0.10);
  --danger-soft-ink: #9f1239;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow: 0 6px 18px rgba(23, 23, 58, 0.10);
  --shadow-lg: 0 20px 50px rgba(23, 23, 58, 0.16);
  --shadow-card: 0 1px 2px rgba(23, 23, 58, 0.06), 0 10px 26px rgba(23, 23, 58, 0.07);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --maxw: 480px;
  --header-h: 52px;
  --search-h: 54px;
  --tap: 44px;
  --gutter: 16px;
  --pct: 0%;
  --focus: #4338ca;
  --focus-halo: rgba(109, 40, 217, 0.25);
  --scrim: rgba(18, 18, 38, 0.45);
  --header-bg: rgba(255, 255, 255, 0.88);
  --footer-bg: #fbfbfe;
  --chip-bg: rgba(20, 20, 42, 0.04);
  --ad-border: #d5d7e6;
  --ad-bg: rgba(20, 20, 42, 0.02);
  --ad-label: #6a6b8a;
  --cover-veil: linear-gradient(to bottom, rgba(16, 16, 40, 0.28), rgba(16, 16, 40, 0) 42%);
  --hero-glow: radial-gradient(120% 80% at 50% 0%, rgba(109, 40, 217, 0.12), rgba(14, 116, 144, 0) 70%);
}