/* ==========================================================================
   KP Stellar Astro — canonical design tokens
   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.
   ========================================================================== */

:root {
  /* ---- surfaces --------------------------------------------------- */
  --bg: #f4f5f8;
  --surface: #f4f5f8;      /* alias of --bg, new semantic name */
  --surface-2: #f1f3f5;    /* one step up from --bg, for nested panels; tuned so --text-muted stays >=4.5:1 (AA) on it -- see tools/check_contrast.py */
  --card: #ffffff;
  --sheet: #fcfaf4;
  --overlay: rgba(20, 22, 34, .45);

  /* ---- lines --------------------------------------------------------- */
  --line: #e6e8ee;
  --line-strong: #cfd3de;

  /* ---- text ------------------------------------------------------ */
  --text: #1c2138;
  --text-muted: #666e8c;
  --text-faint: #9198b3;
  --muted: var(--text-muted); /* legacy alias, keep for one release */
  --heading: #1B2A6B;

  /* ---- brand ------------------------------------------------------- */
  --primary: #1B2A6B;
  --primary-hover: #141f52;
  --primary-dark: #141f52;    /* legacy alias name used on some pages */
  --primary-soft: #eef1f9;
  --on-primary: #ffffff;
  --on-soft-primary: var(--primary); /* text color for use ON --primary-soft; separate from --primary because dark mode needs a lighter shade here for AA (see below) */
  --accent: #D94F2B;
  --gold: #E8B53A;
  --gold-ink: #8a6400;

  /* ---- state ----------------------------------------------------- */
  /* --success tuned to #1c7e45 (from the audit's #1c8a52) so --success text
     stays >=4.5:1 on --success-soft in light mode -- see tools/check_contrast.py */
  --success: #1c7e45;
  --success-soft: #e4f6ec;
  --warning: #b8790a;
  --warning-soft: #fdf1dc;
  --danger: #c23434;
  --danger-soft: #fce9e9;
  --info: #1B2A6B;
  --info-soft: #eef1f9;
  --focus-ring: 0 0 0 3px var(--primary-soft);

  /* ---- KP-specific: verdict pills / chart wheel ------------------- */
  --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);
  --wheel-line: var(--line-strong);
  --wheel-sign: var(--primary);
  --wheel-planet: var(--accent);
  --wheel-bg: var(--card);

  /* ---- radius scale ------------------------------------------------ */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---- shadow scale (light) ---------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .1), 0 2px 8px rgba(0, 0, 0, .08);
  --shadow-3: 0 8px 30px rgba(27, 42, 107, .12);
  /* legacy aliases */
  --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;

  /* ---- type ---------------------------------------------------------- */
  --font-sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Sitka Display", Georgia, ui-serif, serif;
  /* matches the already-shipped stack in static/index.html's own --mono */
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --sans: var(--font-sans);   /* legacy aliases */
  --serif: var(--font-serif);
  --mono: var(--font-mono);

  --fs-xs: .78rem;
  --fs-sm: .88rem;
  --fs-md: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.4rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.6rem;
  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-loose: 1.8;

  /* ---- motion ----------------------------------------------------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .12s;
  --dur: .2s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #2a2d38;
    --surface: #2a2d38;
    --surface-2: #333744;
    --card: #333744;
    --sheet: #3c3b3f;
    --overlay: rgba(0, 0, 0, .6);

    --line: #474c5e;
    --line-strong: #5c6277;

    --text: #f0f1fa;
    --text-muted: #b3b8d4;
    --text-faint: #838aab;
    --muted: var(--text-muted);
    --heading: #aebbff;

    --primary: #6d87ff;
    --primary-hover: #5a74ec;
    --primary-dark: #8fa3ff;
    --primary-soft: #333b5c;
    --on-primary: #ffffff;
    --on-soft-primary: var(--primary-dark); /* #8fa3ff -- passes 4.5:1 on #333b5c, plain --primary (#6d87ff) does not (3.41:1) */
    /* --accent, --gold unchanged: already legible on #2a2d38 per audit */
    --gold-ink: #f2c65a;

    --success: #3fbf7f;
    --success-soft: #1d3a2b;
    --warning: #e0a83c;
    --warning-soft: #3c3123;
    --danger: #e0685f;
    --danger-soft: #3c1e1e; /* darkened from #3c2323 so --danger text stays >=4.5:1 on it (was 4.33:1) */
    --info: #6d87ff;
    --info-soft: #333b5c;
    --focus-ring: 0 0 0 3px var(--primary-soft);

    --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);
    --wheel-line: var(--line-strong);
    --wheel-sign: var(--primary);
    --wheel-planet: var(--accent);
    --wheel-bg: var(--card);

    /* dark shadows: lighter border, darker cast */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .03);
    --shadow-3: 0 20px 60px rgba(0, 0, 0, .5);
    --shadow: var(--shadow-2);
    --shadow-lg: var(--shadow-3);
  }
}

:root[data-theme="dark"] {
  --bg: #2a2d38;
  --surface: #2a2d38;
  --surface-2: #333744;
  --card: #333744;
  --sheet: #3c3b3f;
  --overlay: rgba(0, 0, 0, .6);

  --line: #474c5e;
  --line-strong: #5c6277;

  --text: #f0f1fa;
  --text-muted: #b3b8d4;
  --text-faint: #838aab;
  --muted: var(--text-muted);
  --heading: #aebbff;

  --primary: #6d87ff;
  --primary-hover: #5a74ec;
  --primary-dark: #8fa3ff;
  --primary-soft: #333b5c;
  --on-primary: #ffffff;
  --on-soft-primary: var(--primary-dark); /* #8fa3ff -- passes 4.5:1 on #333b5c, plain --primary (#6d87ff) does not (3.41:1) */
  --gold-ink: #f2c65a;

  --success: #3fbf7f;
  --success-soft: #1d3a2b;
  --warning: #e0a83c;
  --warning-soft: #3c3123;
  --danger: #e0685f;
  --danger-soft: #3c1e1e; /* darkened from #3c2323 so --danger text stays >=4.5:1 on it (was 4.33:1) */
  --info: #6d87ff;
  --info-soft: #333b5c;
  --focus-ring: 0 0 0 3px var(--primary-soft);

  --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);
  --wheel-line: var(--line-strong);
  --wheel-sign: var(--primary);
  --wheel-planet: var(--accent);
  --wheel-bg: var(--card);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .03);
  --shadow-3: 0 20px 60px rgba(0, 0, 0, .5);
  --shadow: var(--shadow-2);
  --shadow-lg: var(--shadow-3);
}

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