/* ==========================================================================
   KP Stellar Astro — canonical design tokens ("Night sky" theme)
   Single source of truth for color/radius/shadow/spacing/type/motion tokens.
   Loaded on every page BEFORE components.css. Do not duplicate :root blocks
   on individual pages — link this file instead.

   Structure (per project owner sign-off, docs/theme-audit.md):
     1. bare :root            -> complete LIGHT palette (authoritative)
     2. @media prefers-color-scheme: dark, guarded by :not([data-theme="light"])
     3. :root[data-theme="dark"]  -> same values again, wins over (2) when the
        visitor has explicitly picked dark via the in-app toggle
   Every token is defined in bare :root first; the two dark blocks only
   REDEFINE tokens that already exist above — no token is dark-only.
   ========================================================================== */

/* Self-hosted Latin subsets; Fraunces is the variable build (opsz 9..144 + wght 500..600, same file Google serves the approved mockups) (SIL OFL; licences in static/fonts/OFL-*.txt). No Google Fonts: CSP font-src is 'self' data:. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("/static/fonts/fraunces-var-latin-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/fraunces-var-latin-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/source-sans-3-latin-800-normal.woff2") format("woff2"); }

:root {
  /* surfaces */
  --bg: #f7f5f0;
  --surface: #f7f5f0;
  --surface-2: #efece4;
  --card: #ffffff;
  --sheet: #fcfaf4;
  --overlay: rgba(14, 16, 36, .5);
  /* lines */
  --line: #e5e1d6;
  --line-strong: #cbc5b4;
  /* text */
  --text: #1b1d33;
  --text-muted: #525770;
  --text-faint: #62677f;
  --muted: var(--text-muted);
  --faint: var(--text-faint);
  --heading: #1e2057;
  /* brand */
  --primary: #2e3192;
  --primary-hover: #23267a;
  --primary-dark: #23267a;
  --primary-soft: #ecebf8;
  --on-primary: #ffffff;
  --on-soft-primary: #2e3192;
  --accent: #a8401a;
  --gold: #d8a53a;
  --gold-ink: #775400;
  --gold-soft: #fbf1d8;
  /* state */
  --success: #1c7a45;
  --success-soft: #e3f3ea;
  --warning: #8f5d00;
  --warning-soft: #fbf0d9;
  --danger: #b3302f;
  --danger-soft: #fbe8e7;
  --info: #2e3192;
  --info-soft: #ecebf8;
  --focus-ring: 0 0 0 3px rgba(46, 49, 146, .35);
  /* verdict pills */
  --favour: var(--success);
  --favour-soft: var(--success-soft);
  --against: var(--danger);
  --against-soft: var(--danger-soft);
  --neutral: var(--text-muted);
  --neutral-soft: var(--surface-2);
  /* U2 timing tokens (answer card, timeline) */
  --sunk: var(--surface-2);
  --ai-band: #cad3ee;
  --strong: var(--success);
  --strong-soft: var(--success-soft);
  --likely: #3149b8;
  --likely-soft: #e9edfb;
  --possible: #8a5a00;
  --possible-soft: #fbf0d9;
  --none: #5b6079;
  --none-soft: #eeeef3;
  --now: #a8401a;
  --on-status: #ffffff;
  /* chart wheel */
  --wheel-line: var(--line-strong);
  --wheel-sign: var(--primary);
  --wheel-planet: var(--accent);
  --wheel-bg: var(--card);
  --wheel-star: #b98a2a;
  --wheel-house: var(--text-muted);
  /* night-sky band: same look in both themes (redefined below, unchanged) */
  --sky-bg: #11133a;
  --sky-bg-2: #1f2263;
  --on-sky: #f4f1e8;
  --on-sky-muted: #c3c5e6;
  --sky-gold: #f0c96a;
  --on-sky-gold: #1a1530;
  --sky-line: rgba(240, 201, 106, .22);
  --sky-star: rgba(255, 255, 255, .85);
  --header-glass: rgba(247, 245, 240, .9);
  /* radius (U2 values adopted site-wide) */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;
  /* shadow */
  --shadow-1: 0 1px 2px rgba(20, 22, 60, .06);
  --shadow-2: 0 1px 2px rgba(20, 22, 60, .06), 0 6px 24px rgba(20, 22, 60, .07);
  --shadow-3: 0 18px 50px rgba(17, 19, 58, .18);
  --shadow: var(--shadow-2);
  --shadow-lg: var(--shadow-3);
  /* spacing (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 80px;
  --page-max: 1180px;
  /* type */
  --font-display: "Fraunces", "Iowan Old Style", "Sitka Display", Georgia, ui-serif, serif;
  --font-sans: "Source Sans 3", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Noto Sans", Helvetica, Arial, sans-serif;
  --font-serif: var(--font-display);
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --sans: var(--font-sans);
  --serif: var(--font-serif);
  --mono: var(--font-mono);
  --fs-xs: .8rem;
  --fs-sm: .9rem;
  --fs-md: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.45rem;
  --fs-2xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  --fs-3xl: clamp(2.1rem, 1.3rem + 3.4vw, 3.5rem);
  --lh-tight: 1.15;
  --lh-normal: 1.6;
  --lh-loose: 1.8;
  /* motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .12s;
  --dur: .2s;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1024;
    --surface: #0e1024;
    --surface-2: #161936;
    --card: #1a1d3d;
    --sheet: #1f1e36;
    --overlay: rgba(0, 0, 0, .6);
    --line: #2c3063;
    --line-strong: #454a8e;
    --text: #eeecf8;
    --text-muted: #b6b8d8;
    --text-faint: #a2a5c8;
    --muted: var(--text-muted);
    --faint: var(--text-faint);
    --heading: #e4e2ff;
    --primary: #a3acff;
    --primary-hover: #b8bfff;
    --primary-dark: #c3c9ff;
    --primary-soft: #272b61;
    --on-primary: #10122b;
    --on-soft-primary: #c3c9ff;
    --accent: #ff9b73;
    --gold: #f0c96a;
    --gold-ink: #f0c96a;
    --gold-soft: #332c1a;
    --success: #5fd394;
    --success-soft: #15311f;
    --warning: #f0c96a;
    --warning-soft: #332c1a;
    --danger: #ff8f86;
    --danger-soft: #3a1a22;
    --info: #a3acff;
    --info-soft: #272b61;
    --focus-ring: 0 0 0 3px rgba(163, 172, 255, .45);
    --favour: var(--success);
    --favour-soft: var(--success-soft);
    --against: var(--danger);
    --against-soft: var(--danger-soft);
    --neutral: var(--text-muted);
    --neutral-soft: var(--surface-2);
    --sunk: var(--surface-2);
    --ai-band: #2b3356;
    --strong: var(--success);
    --strong-soft: var(--success-soft);
    --likely: #a4b5ff;
    --likely-soft: #232a5a;
    --possible: #f0c96a;
    --possible-soft: #332c1a;
    --none: #b0b3d1;
    --none-soft: #22254a;
    --now: #ff9b73;
    --on-status: #0e1024;
    --wheel-line: var(--line-strong);
    --wheel-sign: var(--primary);
    --wheel-planet: var(--accent);
    --wheel-bg: var(--card);
    --wheel-star: #f0c96a;
    --wheel-house: var(--text-muted);
    --sky-bg: #0a0c22;
    --sky-bg-2: #1a1d52;
    --on-sky: #f4f1e8;
    --on-sky-muted: #c3c5e6;
    --sky-gold: #f0c96a;
    --on-sky-gold: #1a1530;
    --sky-line: rgba(240, 201, 106, .22);
    --sky-star: rgba(255, 255, 255, .85);
    --header-glass: rgba(14, 16, 36, .88);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 28px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .03);
    --shadow-3: 0 20px 60px rgba(0, 0, 0, .55);
    --shadow: var(--shadow-2);
    --shadow-lg: var(--shadow-3);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0e1024;
  --surface: #0e1024;
  --surface-2: #161936;
  --card: #1a1d3d;
  --sheet: #1f1e36;
  --overlay: rgba(0, 0, 0, .6);
  --line: #2c3063;
  --line-strong: #454a8e;
  --text: #eeecf8;
  --text-muted: #b6b8d8;
  --text-faint: #a2a5c8;
  --muted: var(--text-muted);
  --faint: var(--text-faint);
  --heading: #e4e2ff;
  --primary: #a3acff;
  --primary-hover: #b8bfff;
  --primary-dark: #c3c9ff;
  --primary-soft: #272b61;
  --on-primary: #10122b;
  --on-soft-primary: #c3c9ff;
  --accent: #ff9b73;
  --gold: #f0c96a;
  --gold-ink: #f0c96a;
  --gold-soft: #332c1a;
  --success: #5fd394;
  --success-soft: #15311f;
  --warning: #f0c96a;
  --warning-soft: #332c1a;
  --danger: #ff8f86;
  --danger-soft: #3a1a22;
  --info: #a3acff;
  --info-soft: #272b61;
  --focus-ring: 0 0 0 3px rgba(163, 172, 255, .45);
  --favour: var(--success);
  --favour-soft: var(--success-soft);
  --against: var(--danger);
  --against-soft: var(--danger-soft);
  --neutral: var(--text-muted);
  --neutral-soft: var(--surface-2);
  --sunk: var(--surface-2);
  --ai-band: #2b3356;
  --strong: var(--success);
  --strong-soft: var(--success-soft);
  --likely: #a4b5ff;
  --likely-soft: #232a5a;
  --possible: #f0c96a;
  --possible-soft: #332c1a;
  --none: #b0b3d1;
  --none-soft: #22254a;
  --now: #ff9b73;
  --on-status: #0e1024;
  --wheel-line: var(--line-strong);
  --wheel-sign: var(--primary);
  --wheel-planet: var(--accent);
  --wheel-bg: var(--card);
  --wheel-star: #f0c96a;
  --wheel-house: var(--text-muted);
  --sky-bg: #0a0c22;
  --sky-bg-2: #1a1d52;
  --on-sky: #f4f1e8;
  --on-sky-muted: #c3c5e6;
  --sky-gold: #f0c96a;
  --on-sky-gold: #1a1530;
  --sky-line: rgba(240, 201, 106, .22);
  --sky-star: rgba(255, 255, 255, .85);
  --header-glass: rgba(14, 16, 36, .88);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 28px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .03);
  --shadow-3: 0 20px 60px rgba(0, 0, 0, .55);
  --shadow: var(--shadow-2);
  --shadow-lg: var(--shadow-3);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}