/*!
 * NorthFiveFun — dark theme
 * ---------------------------------------------------------------------------
 * Dark is the DEFAULT theme: deep indigo / near-black surfaces with one
 * vivid electric accent (violet -> cyan). Cyan is reserved for decorative
 * gradients; anything carrying text uses the violet -> indigo pair so
 * white text keeps a 4.5:1+ contrast ratio.
 *
 * 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. Dark palette — default
   --------------------------------------------------------------------------
   `:not([data-theme="light"])` keeps the dark palette for every state that
   did not explicitly ask for light; the doubled :not() also gives this rule
   a higher specificity than the light sheet's default, so dark wins if a
   browser ever applies both sheets at once (the light sheet is linked last).
   -------------------------------------------------------------------------- */
:root:not([data-theme="light"]):not([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%);
}

/* --------------------------------------------------------------------------
   2. Light palette — `<html data-theme="light">`
   --------------------------------------------------------------------------
   This sheet is often the one the browser left inert, so the dark sheet has
   to be able to render light too. The hook works no matter which theme
   stylesheet the browser actually applied.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  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%);
}

/* --------------------------------------------------------------------------
   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%);
  }
}