/* ============================================================================
   PAM THEME — the SINGLE place to change how the whole app looks.
   Change a value here and light + dark + every accent + every screen follows.
   Loaded AFTER /theme.css (the shared base), so these win. Every active colour in
   the app derives from the tokens below; the CSS in index.html only *consumes*
   them. To re-theme PAM, you edit this file and nothing else.
   ============================================================================ */

/* Self-hosted typefaces — /knows links only this file, so the faces must load from here too
   (the browser dedupes the shared URL when index.html also pulls it via /theme.css). */
@import url('/vendor/fonts/fonts.css');

/* ===== Aurora Glass — layered colorful glass over an aurora-bloom wash (John's Jul-28 prototype) =====
   Palette: iris #6d5efc · sky #3ba7ff · teal #22d3c5 · coral #ff7a9c (MINIMIZED) · gold #ffca6b.
   The coral bloom is deliberately faint — John asked to "minimize the pink blob." ===== */
:root, body.polaris-theme{
  --iris:#6d5efc; --sky:#3ba7ff; --teal:#22d3c5; --coral:#ff7a9c; --goldc:#ffca6b;
  --bg:#eef0ff; --bg2:#ffffff; --bg3:#f7f0f7;
  --panel:rgba(255,255,255,.55); --panel2:rgba(255,255,255,.74);
  --brd:rgba(60,48,120,.13); --brd2:rgba(60,48,120,.23);
  --ink:#1a1730; --ink2:#5a5674; --muted:#8f8aa8; --faint:#a9a4c4;
  --accent:#6d5efc; --gold:#6d5efc; --gold-soft:rgba(109,94,252,.13); --gold-line:rgba(109,94,252,.32);
  --green:#22b877; --green-soft:rgba(34,184,119,.14);
  --red:#f2506b; --red-soft:rgba(242,80,107,.13);
  --amber:#f59e3c; --amber-soft:rgba(245,158,60,.15);
  --blue:#3ba7ff; --blue-soft:rgba(59,167,255,.14);
  --shadow:0 22px 50px -26px rgba(60,40,120,.42);
  /* ---------------------------------------------------------------------------------------------
     TEXT ON AN ACCENT FILL. `--accent` is a BRAND colour: rails, dots, borders, glows, focus rings —
     places where a contrast ratio does not apply. It is NOT a text background, and it cannot be made
     into one: white on the default #6d5efc is 4.51:1 and near-black is 4.66:1, so NO choice of
     `--on-accent` reaches 7:1. Worse, the ◐ Color slider rewrites `--accent` at runtime to
     `hsl(h s% 50%)` for ANY hue — measured worst case white 1.20:1 (h=60 s=90) and near-black
     2.17:1 (h=240 s=80). The recorded "4.51:1 known-open" was only ever the DEFAULT hue.
     So a filled control takes `--accent-fill` / `--on-accent-fill` instead: the same hue family,
     dark enough that WHITE always clears 7:1, and identical in both themes so the two can never
     drift apart. `applyCustom()` in index.html derives the same pair for a custom hue.
     Measured (white on fill): default 8.63:1 · indigo 8.60 · sky 8.37 · violet 8.98 · amber 7.73.
     --------------------------------------------------------------------------------------------- */
  --accent-fill:#4133bd; --on-accent-fill:#ffffff;
  /* RETIRED 2026-08-07 — kept declared only so the contrast tables can keep printing the rejected
     pair (and so a stale cached page still resolves it). NO rule may consume it; the harness
     asserts index.html contains zero `var(--on-accent)`. */
  --on-accent:#ffffff;
  /* The user's own chat bubble. Was iris->sky at full brightness, which put #fff at 4.51:1 on the
     first stop and 2.57:1 on the last — the least readable text in the product was the text the
     user had just typed. Deepened so white clears 7.97:1 at EVERY stop of the ramp. One value for
     both themes (the dark override is gone) so a bubble cannot be legible in one theme only. */
  --user-grad:linear-gradient(135deg,#4133bd,#14557f);
  --a1:rgba(109,94,252,.16); --a2:rgba(34,211,197,.12); --a3:rgba(59,167,255,.10);
  /* aurora-bloom page wash: iris + teal strong, gold soft, coral barely-there */
  --page-base:radial-gradient(120% 92% at 10% -6%, rgba(109,94,252,.22), transparent 56%),
    radial-gradient(110% 80% at 94% 14%, rgba(34,211,197,.17), transparent 55%),
    radial-gradient(95% 72% at 72% 104%, rgba(255,202,107,.13), transparent 60%),
    radial-gradient(80% 60% at 30% 96%, rgba(255,122,156,.06), transparent 62%),
    linear-gradient(165deg,#eef0ff,#f7f0f7 58%,#eef0ff);
  --rail-glass:rgba(255,255,255,.5); --copilot-glass:rgba(255,255,255,.42);
  --talk-grad:radial-gradient(125% 100% at 50% -8%, #f0eeff 0%, #eef6f4 48%, #f4f0f8 100%);
  --menu-glass:rgba(255,255,255,.5);
  --glass-hi:rgba(255,255,255,.75);
  --glass-sheen:linear-gradient(158deg, rgba(255,255,255,.28), rgba(255,255,255,0) 52%);
  --glass-tile:rgba(255,255,255,.54);
  --card-shadow:0 1px 2px rgba(60,40,120,.16), 0 8px 18px -12px rgba(60,40,120,.26), 0 26px 54px -26px rgba(60,40,120,.44);   /* contact + ambient + drop = glass panes at real heights */
  --tile-glow:radial-gradient(130% 100% at 100% 0%, var(--gold-soft), transparent 58%);
}
/* Aurora Glass — dark (deep indigo night, opt-in via ◐). Base palette is ALSO set on body.polaris-theme
   (a closer ancestor), so we re-declare the dark tokens on that body too. */
:root[data-theme="dark"], :root[data-theme="dark"] body.polaris-theme{
  --iris:#8479ff; --sky:#5ab8ff; --teal:#2ee6d5; --coral:#ff8fab; --goldc:#ffd27a;
  --bg:#0e0b1e; --bg2:#151033; --bg3:#0a0818;
  --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.09);
  --brd:rgba(200,195,255,.13); --brd2:rgba(200,195,255,.24);
  --ink:#eef0ff; --ink2:#a7a5c8; --muted:#8480a6; --faint:#5e5a82;
  --accent:#8479ff; --gold:#8479ff; --gold-soft:rgba(132,121,255,.17); --gold-line:rgba(132,121,255,.42);
  --red:#ff6b86; --red-soft:rgba(255,107,134,.15); --amber:#ffb25b; --amber-soft:rgba(255,178,91,.16);
  --green:#2ee6a5; --green-soft:rgba(46,230,165,.16); --blue:#5ab8ff; --blue-soft:rgba(90,184,255,.15);
  --shadow:0 24px 60px -24px rgba(0,0,0,.72);
  /* --accent-fill / --on-accent-fill are deliberately NOT re-declared here: the filled controls use
     the same deep pair in both themes. A dark-theme-only fill is exactly how the light and dark
     numbers drifted apart last time. (#0b0820 on the dark accent was 5.76:1 — and 2.48:1 once the
     Color slider moved.) --user-grad is likewise inherited from the base block now. */
  --on-accent:#0b0820;
  --a1:rgba(132,121,255,.26); --a2:rgba(46,230,213,.15); --a3:rgba(90,184,255,.13);
  --page-base:radial-gradient(120% 92% at 10% -6%, rgba(109,94,252,.30), transparent 55%),
    radial-gradient(110% 80% at 94% 14%, rgba(34,211,197,.17), transparent 55%),
    radial-gradient(95% 72% at 72% 104%, rgba(255,202,107,.10), transparent 60%),
    radial-gradient(80% 60% at 30% 96%, rgba(255,122,156,.08), transparent 62%),
    linear-gradient(160deg,#0e0b1e,#151033 58%,#0a0818);
  --rail-glass:rgba(14,11,30,.5); --copilot-glass:rgba(14,11,30,.44);
  --talk-grad:radial-gradient(125% 100% at 50% -8%, #191238 0%, #100c26 55%, #0a0818 100%);
  --menu-glass:rgba(22,17,44,.55);
  --glass-hi:rgba(220,225,255,.08);
  --glass-sheen:linear-gradient(158deg, rgba(220,225,255,.08), rgba(220,225,255,0) 52%);
  --glass-tile:rgba(44,38,80,.42);
  --card-shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 22px -14px rgba(0,0,0,.62), 0 30px 64px -26px rgba(0,0,0,.8);   /* contact + ambient + drop */
  --tile-glow:radial-gradient(130% 100% at 100% 0%, var(--gold-soft), transparent 58%);
}
/* Color presets (◐ menu) — cool accents that remap the accent + ambient wash. Emerald is the default.
   Each carries its own --accent-fill so a filled button stays in the family AND stays readable:
   white on indigo #383cb0 = 8.60:1 · sky #155278 = 8.37 · violet #5b21b6 = 8.98 · amber #6f4c11 = 7.73.
   These blocks are declared AFTER the dark block and match on both themes, which is why the fill is
   theme-independent — a preset has no dark variant to disagree with. */
:root[data-accent="indigo"], :root[data-accent="indigo"] body.polaris-theme{--accent:#6366f1;--gold:#6366f1;--gold-soft:rgba(99,102,241,.14);--gold-line:rgba(99,102,241,.36);--a1:rgba(99,102,241,.16);--a2:rgba(129,140,248,.11);--a3:rgba(56,189,248,.09);--accent-fill:#383cb0}
:root[data-accent="sky"], :root[data-accent="sky"] body.polaris-theme{--accent:#2f9fe0;--gold:#2f9fe0;--gold-soft:rgba(47,159,224,.14);--gold-line:rgba(47,159,224,.36);--a1:rgba(47,159,224,.15);--a2:rgba(56,189,248,.11);--a3:rgba(45,212,160,.09);--accent-fill:#155278}
:root[data-accent="violet"], :root[data-accent="violet"] body.polaris-theme{--accent:#8b5cf6;--gold:#8b5cf6;--gold-soft:rgba(139,92,246,.14);--gold-line:rgba(139,92,246,.36);--a1:rgba(139,92,246,.15);--a2:rgba(167,139,250,.11);--a3:rgba(99,102,241,.09);--accent-fill:#5b21b6}
:root[data-accent="amber"], :root[data-accent="amber"] body.polaris-theme{--accent:#e0a53a;--gold:#e0a53a;--gold-soft:rgba(224,165,58,.15);--gold-line:rgba(224,165,58,.36);--a1:rgba(224,165,58,.14);--a2:rgba(232,190,110,.10);--a3:rgba(200,150,80,.08);--accent-fill:#6f4c11}