/* ============================================================
   themes.css — the canvases. Aurora (data-theme="dark") is the default and is
   defined in revamp.css; every block below is a COMPLETE token set for one
   alternative canvas, so no theme inherits a colour by accident. Solid canvases
   set --aurora: 0 (the chromatic wash fades out) and --ink flips to dark on the
   light ones so hovers, hairlines and spotlights stay visible. Loaded right
   after revamp.css. The picker lives in src/app/themesView.js.
   ============================================================ */

/* ---- shared: a light shadow ladder for the light canvases ---- */
:root[data-scheme="light"] {
  --sh-1: 0 1px 2px rgba(15, 16, 17, 0.06), 0 4px 12px rgba(15, 16, 17, 0.05);
  --sh-2: 0 2px 6px rgba(15, 16, 17, 0.06), 0 14px 34px rgba(15, 16, 17, 0.08);
  --sh-3: 0 8px 18px rgba(15, 16, 17, 0.08), 0 40px 80px -20px rgba(15, 16, 17, 0.18);
  --sh-hero: 0 2px 4px rgba(15, 16, 17, 0.05), 0 20px 50px rgba(15, 16, 17, 0.12);
  --highlight: rgba(255, 255, 255, 0.8);
  --well-glow: transparent;
  color-scheme: light;
}
:root[data-scheme="light"] .cm-score { text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); }
:root[data-scheme="dark"] .cm-score { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65); }
/* the primary pill's drop shadow is tuned for dark; soften it on light canvases */
:root[data-scheme="light"] .btn-primary { box-shadow: 0 10px 22px -12px rgba(15, 16, 17, 0.45); }
:root[data-scheme="light"] .btn-primary.is-live { color: #fff; }

/* ============================================================
   OBSIDIAN — solid black. The aurora switched off; nothing but ink.
   ============================================================ */
:root[data-theme="obsidian"] {
  --aurora: 0;
  --bg: #050506; --bg-tint: #08090a; --card: #0a0a0c; --card-solid: #0b0b0d; --card-2: #121214; --surface-2: #1b1b1f;
  --well: linear-gradient(180deg, #0e0e10, #070708); --well-edge: rgba(245, 245, 247, 0.12);
  --hairline: rgba(245, 245, 247, 0.10); --hairline-strong: rgba(245, 245, 247, 0.19);
  --highlight: rgba(245, 245, 247, 0.04); --fill-subtle: rgba(245, 245, 247, 0.045); --fill: rgba(245, 245, 247, 0.09);
  --ink: 245, 245, 247; --inset: rgba(0, 0, 0, 0.5); --cta-bg: #ffffff; --cta-fg: #050506; --on-accent: #06222b;
  --text: #f7f8f9; --text-2: #a4a6a9; --text-3: #6d6f73; --text-4: #46484c;
  --accent: #00b3dd; --accent-press: #0a93b5; --signal-bright: #34ccef;
  --blue: #90b8f0; --orange: #e6b25c; --pink: #dd90d8; --violet: #847dff; --danger: #e0735c; --warn: #e6b25c; --gold: #e6b25c;
  --ring-m: #00b3dd; --ring-c: #e6b25c; --ring-x: #90b8f0;
  --band-low: #e0735c; --band-mid: #e6b25c; --band-high: #3fd98a;
}

/* ============================================================
   GRAPHITE — solid charcoal. Softer than black, warmer than Aurora.
   ============================================================ */
:root[data-theme="graphite"] {
  --aurora: 0;
  --bg: #17181b; --bg-tint: #1a1b1f; --card: #1e1f24; --card-solid: #1e2025; --card-2: #262830; --surface-2: #31343c;
  --well: linear-gradient(180deg, #232529, #1a1b1f); --well-edge: rgba(245, 245, 247, 0.10);
  --hairline: rgba(245, 245, 247, 0.08); --hairline-strong: rgba(245, 245, 247, 0.16);
  --highlight: rgba(245, 245, 247, 0.04); --fill-subtle: rgba(245, 245, 247, 0.045); --fill: rgba(245, 245, 247, 0.09);
  --ink: 245, 245, 247; --inset: rgba(0, 0, 0, 0.22); --cta-bg: #ffffff; --cta-fg: #17181b; --on-accent: #04202a;
  --text: #f2f3f4; --text-2: #a8abb1; --text-3: #777b83; --text-4: #565a62;
  --accent: #2cc4e6; --accent-press: #1aa5c4; --signal-bright: #5fd6f0;
  --blue: #9dc0f2; --orange: #e9b866; --pink: #dfa0da; --violet: #8f88ff; --danger: #e57c66; --warn: #e9b866; --gold: #e9b866;
  --ring-m: #2cc4e6; --ring-c: #e9b866; --ring-x: #9dc0f2;
  --band-low: #e57c66; --band-mid: #e9b866; --band-high: #4ad893;
}

/* ============================================================
   MIDNIGHT — solid deep navy, sky-blue signal.
   ============================================================ */
:root[data-theme="midnight"] {
  --aurora: 0;
  --bg: #0a1020; --bg-tint: #0d1426; --card: #0f1730; --card-solid: #101a34; --card-2: #16213f; --surface-2: #1f2c4f;
  --well: linear-gradient(180deg, #131f3c, #0c1428); --well-edge: rgba(200, 215, 255, 0.12);
  --hairline: rgba(200, 215, 255, 0.10); --hairline-strong: rgba(200, 215, 255, 0.19);
  --highlight: rgba(200, 215, 255, 0.05); --fill-subtle: rgba(200, 215, 255, 0.05); --fill: rgba(200, 215, 255, 0.10);
  --ink: 200, 215, 255; --inset: rgba(2, 6, 18, 0.45); --cta-bg: #ffffff; --cta-fg: #0a1020; --on-accent: #06213a;
  --text: #eef2ff; --text-2: #9fb0d6; --text-3: #6c7ea8; --text-4: #4a5a80;
  --accent: #7cc4ff; --accent-press: #5aa9ec; --signal-bright: #a3d8ff;
  --blue: #b3a7ff; --orange: #f2c069; --pink: #e39ae0; --violet: #9d94ff; --danger: #ff7b6b; --warn: #f2c069; --gold: #f2c069;
  --ring-m: #7cc4ff; --ring-c: #f2c069; --ring-x: #b3a7ff;
  --band-low: #ff7b6b; --band-mid: #f2c069; --band-high: #5fe3b1;
}

/* ============================================================
   SIGNAL — near-black, electric green, a faint technical grid. The original
   instrument register.
   ============================================================ */
:root[data-theme="signal"] {
  --aurora: 1;
  --bg: #0c0f12; --bg-tint: #0f1317; --card: #121619; --card-solid: #12161a; --card-2: #181d22; --surface-2: #242b32;
  --well: linear-gradient(180deg, #161b20, #0e1216); --well-edge: rgba(245, 245, 247, 0.11);
  --hairline: rgba(245, 245, 247, 0.08); --hairline-strong: rgba(245, 245, 247, 0.17);
  --highlight: rgba(245, 245, 247, 0.05); --fill-subtle: rgba(245, 245, 247, 0.045); --fill: rgba(245, 245, 247, 0.09);
  --ink: 245, 245, 247; --inset: rgba(0, 0, 0, 0.32); --cta-bg: #ffffff; --cta-fg: #0c0f12; --on-accent: #06240f;
  --text: #f4f7f5; --text-2: #a3aaa6; --text-3: #6f7773; --text-4: #4b5350;
  --accent: #30d158; --accent-press: #22b04a; --signal-bright: #5cf08a;
  --blue: #4fc3f7; --orange: #f0b53c; --pink: #e08ad8; --violet: #8f8bff; --danger: #ff6b57; --warn: #f0b53c; --gold: #f0b53c;
  --ring-m: #30d158; --ring-c: #f0b53c; --ring-x: #4fc3f7;
  --band-low: #ff6b57; --band-mid: #f0b53c; --band-high: #30d158;
}
/* the aurora layers become a masked grid + one green instrument glow */
:root[data-theme="signal"] body::before {
  inset: 0; filter: none; animation: none;
  background-image: linear-gradient(rgba(245, 245, 247, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 245, 247, 0.06) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(80% 55% at 50% 0%, #000, transparent 72%); mask-image: radial-gradient(80% 55% at 50% 0%, #000, transparent 72%);
}
:root[data-theme="signal"] body::after {
  inset: 0; filter: blur(12px); animation: none;
  background: radial-gradient(60% 40% at 50% -10%, rgba(48, 209, 88, 0.14), transparent 70%);
}

/* ============================================================
   EMBER — solid black, amber signal. Warm instrument.
   ============================================================ */
:root[data-theme="ember"] {
  --aurora: 0;
  --bg: #0a0908; --bg-tint: #0d0c0a; --card: #100f0d; --card-solid: #12100e; --card-2: #1a1714; --surface-2: #27221b;
  --well: linear-gradient(180deg, #171412, #0c0b0a); --well-edge: rgba(255, 236, 210, 0.11);
  --hairline: rgba(255, 236, 210, 0.09); --hairline-strong: rgba(255, 236, 210, 0.18);
  --highlight: rgba(255, 236, 210, 0.04); --fill-subtle: rgba(255, 236, 210, 0.045); --fill: rgba(255, 236, 210, 0.09);
  --ink: 255, 236, 210; --inset: rgba(0, 0, 0, 0.45); --cta-bg: #fff4e6; --cta-fg: #0a0908; --on-accent: #2a1a05;
  --text: #f7f2ea; --text-2: #b3a897; --text-3: #7d7466; --text-4: #55504a;
  --accent: #f0a23c; --accent-press: #d18a2a; --signal-bright: #ffbd5c;
  --blue: #d9b48a; --orange: #ff8a4c; --pink: #e8a0b0; --violet: #c9a4ff; --danger: #ff6b57; --warn: #ff8a4c; --gold: #f0a23c;
  --ring-m: #f0a23c; --ring-c: #ff8a4c; --ring-x: #ffd479;
  --band-low: #ff6b57; --band-mid: #d9b48a; --band-high: #f0a23c;
}

/* ============================================================
   MONO — black and white, zero chroma. One red survives, for alerts only.
   ============================================================ */
:root[data-theme="mono"] {
  --aurora: 0;
  --bg: #000000; --bg-tint: #050505; --card: #0a0a0a; --card-solid: #0b0b0b; --card-2: #141414; --surface-2: #242424;
  --well: linear-gradient(180deg, #111111, #060606); --well-edge: rgba(255, 255, 255, 0.14);
  --hairline: rgba(255, 255, 255, 0.12); --hairline-strong: rgba(255, 255, 255, 0.22);
  --highlight: rgba(255, 255, 255, 0.05); --fill-subtle: rgba(255, 255, 255, 0.05); --fill: rgba(255, 255, 255, 0.10);
  --ink: 255, 255, 255; --inset: rgba(0, 0, 0, 0.6); --cta-bg: #ffffff; --cta-fg: #000000; --on-accent: #000000;
  --text: #ffffff; --text-2: #a3a3a3; --text-3: #6f6f6f; --text-4: #4a4a4a;
  --accent: #ffffff; --accent-press: #d4d4d4; --signal-bright: #ffffff;
  --blue: #cfcfcf; --orange: #e5e5e5; --pink: #bdbdbd; --violet: #d6d6d6; --danger: #ff4d4d; --warn: #e5e5e5; --gold: #e5e5e5;
  --ring-m: #ffffff; --ring-c: #9a9a9a; --ring-x: #5c5c5c;
  --band-low: #5c5c5c; --band-mid: #9a9a9a; --band-high: #ffffff;
}

/* ============================================================
   PAPER — solid white. Ink on paper, deep-cyan data.
   ============================================================ */
:root[data-theme="paper"] {
  --aurora: 0;
  --bg: #ffffff; --bg-tint: #ffffff; --card: #ffffff; --card-solid: #ffffff; --card-2: #f5f5f7; --surface-2: #e8e9ee;
  --well: linear-gradient(180deg, #ffffff, #f5f5f7); --well-edge: rgba(15, 16, 17, 0.10);
  --hairline: rgba(15, 16, 17, 0.10); --hairline-strong: rgba(15, 16, 17, 0.19);
  --fill-subtle: rgba(15, 16, 17, 0.04); --fill: rgba(15, 16, 17, 0.07);
  --ink: 15, 16, 17; --inset: rgba(15, 16, 17, 0.04); --cta-bg: #0f1011; --cta-fg: #ffffff; --on-accent: #ffffff;
  --text: #0f1011; --text-2: #4c4f55; --text-3: #7a7e86; --text-4: #a3a7ae;
  --accent: #007c9a; --accent-press: #00617a; --signal-bright: #0aa3c8;
  --blue: #2f6fc4; --orange: #b8741a; --pink: #b04aa8; --violet: #5f57d6; --danger: #c8452e; --warn: #b8741a; --gold: #b8741a;
  --ring-m: #007c9a; --ring-c: #d18f1f; --ring-x: #2f6fc4;
  --band-low: #c8452e; --band-mid: #d18f1f; --band-high: #1f9a5a;
}

/* ============================================================
   DAYLIGHT — the light twin of Aurora: pale canvas, the wash turned down.
   ============================================================ */
:root[data-theme="light"] {
  --aurora: 0.55;
  --bg: #f4f5f8; --bg-tint: #f8f9fb; --card: rgba(255, 255, 255, 0.8); --card-solid: #ffffff; --card-2: #f1f2f6; --surface-2: #e3e5eb;
  --well: linear-gradient(180deg, #ffffff, #f3f4f8); --well-edge: rgba(15, 16, 17, 0.09);
  --hairline: rgba(15, 16, 17, 0.09); --hairline-strong: rgba(15, 16, 17, 0.17);
  --fill-subtle: rgba(15, 16, 17, 0.04); --fill: rgba(15, 16, 17, 0.07);
  --ink: 15, 16, 17; --inset: rgba(15, 16, 17, 0.04); --cta-bg: #14161a; --cta-fg: #ffffff; --on-accent: #ffffff;
  --text: #14161a; --text-2: #4a4e57; --text-3: #767b85; --text-4: #a0a5ae;
  --accent: #0a8fb0; --accent-press: #07728d; --signal-bright: #12a9cf;
  --blue: #3d7bd6; --orange: #c2811c; --pink: #c05cb8; --violet: #6a62e0; --danger: #d1503a; --warn: #c2811c; --gold: #c2811c;
  --ring-m: #0a8fb0; --ring-c: #c2811c; --ring-x: #3d7bd6;
  --band-low: #d1503a; --band-mid: #c2811c; --band-high: #22a060;
}

/* ============================================================
   FROST — solid cool light, navy ink.
   ============================================================ */
:root[data-theme="frost"] {
  --aurora: 0;
  --bg: #eef2f7; --bg-tint: #f3f6fa; --card: #ffffff; --card-solid: #ffffff; --card-2: #f3f6fa; --surface-2: #dde5ef;
  --well: linear-gradient(180deg, #ffffff, #f1f5fa); --well-edge: rgba(15, 26, 43, 0.10);
  --hairline: rgba(15, 26, 43, 0.10); --hairline-strong: rgba(15, 26, 43, 0.19);
  --fill-subtle: rgba(15, 26, 43, 0.045); --fill: rgba(15, 26, 43, 0.08);
  --ink: 15, 26, 43; --inset: rgba(15, 26, 43, 0.045); --cta-bg: #0f1a2b; --cta-fg: #ffffff; --on-accent: #ffffff;
  --text: #0f1a2b; --text-2: #4b5a70; --text-3: #7a8798; --text-4: #a5b0bf;
  --accent: #1f5fbf; --accent-press: #174d9c; --signal-bright: #3b7ee0;
  --blue: #1f5fbf; --orange: #c47d14; --pink: #b452a8; --violet: #6558d8; --danger: #c94434; --warn: #c47d14; --gold: #c47d14;
  --ring-m: #1f5fbf; --ring-c: #c47d14; --ring-x: #6558d8;
  --band-low: #c94434; --band-mid: #c47d14; --band-high: #1f9a5a;
}

/* ============================================================
   SAND — solid warm light, espresso ink, terracotta signal.
   ============================================================ */
:root[data-theme="sand"] {
  --aurora: 0;
  --bg: #f6f1e8; --bg-tint: #f9f5ee; --card: #fffdf8; --card-solid: #fffdf8; --card-2: #f2ece1; --surface-2: #e5dccb;
  --well: linear-gradient(180deg, #fffdf8, #f3ede2); --well-edge: rgba(43, 36, 28, 0.11);
  --hairline: rgba(43, 36, 28, 0.11); --hairline-strong: rgba(43, 36, 28, 0.20);
  --fill-subtle: rgba(43, 36, 28, 0.045); --fill: rgba(43, 36, 28, 0.08);
  --ink: 43, 36, 28; --inset: rgba(43, 36, 28, 0.05); --cta-bg: #2b241c; --cta-fg: #fff9f0; --on-accent: #ffffff;
  --text: #2b241c; --text-2: #5c5347; --text-3: #8a8073; --text-4: #b3aa9d;
  --accent: #b8651f; --accent-press: #9c5318; --signal-bright: #d97a2c;
  --blue: #3b6fb0; --orange: #d1971f; --pink: #b5548f; --violet: #7a5fc4; --danger: #c23f2f; --warn: #d1971f; --gold: #d1971f;
  --ring-m: #b8651f; --ring-c: #d1971f; --ring-x: #3b6fb0;
  --band-low: #c23f2f; --band-mid: #d1971f; --band-high: #2f8f57;
}

/* ============================================================
   THEME PICKER — a sheet of canvases. Each card is a tiny screen painted with
   that theme's own colours (inline --p-* vars from themesView.js).
   ============================================================ */
.theme-modal { width: min(760px, 100%); }
.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: var(--s-3) 0 4px; }
@media (max-width: 640px) { .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .theme-grid { grid-template-columns: 1fr; } }
.theme-card {
  position: relative; text-align: left; display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 12px;
  border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--card-2); color: var(--text); cursor: pointer;
  transition: border-color .2s var(--ease), transform .25s var(--ease-out, var(--ease)), box-shadow .25s var(--ease);
}
.theme-card:hover { border-color: var(--hairline-strong); transform: translateY(-2px); box-shadow: var(--sh-2); }
.theme-card[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.theme-card__screen {
  position: relative; height: 84px; border-radius: 8px; overflow: hidden; background: var(--p-bg); border: 1px solid var(--p-line);
  isolation: isolate;
}
.theme-card__screen::before {  /* the aurora wash, only on canvases that have one */
  content: ""; position: absolute; inset: -30%; z-index: 0; opacity: var(--p-aurora, 0);
  background: radial-gradient(40% 50% at 25% 25%, rgba(132, 125, 255, 0.5), transparent 62%), radial-gradient(45% 45% at 80% 20%, rgba(0, 179, 221, 0.45), transparent 62%), radial-gradient(45% 50% at 70% 85%, rgba(221, 144, 216, 0.35), transparent 62%);
  filter: blur(10px);
}
.theme-card__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 22%; border-right: 1px solid var(--p-line); z-index: 1; }
.theme-card__rail i { display: block; height: 3px; border-radius: 2px; margin: 9px 5px 0; background: var(--p-text); opacity: 0.35; width: 55%; }
.theme-card__rail i:first-child { opacity: 0.9; background: var(--p-accent); margin-top: 10px; }
.theme-card__card { position: absolute; left: 30%; top: 14px; right: 10px; bottom: 12px; border-radius: 6px; background: var(--p-card); border: 1px solid var(--p-line); z-index: 1; }
.theme-card__card i { position: absolute; left: 9px; height: 3px; border-radius: 2px; background: var(--p-text); }
.theme-card__card i:nth-child(1) { top: 10px; width: 46%; opacity: 0.95; height: 4px; }
.theme-card__card i:nth-child(2) { top: 20px; width: 62%; opacity: 0.35; }
.theme-card__card i:nth-child(3) { top: 27px; width: 40%; opacity: 0.25; }
.theme-card__arc { position: absolute; right: 10px; bottom: 8px; width: 26px; height: 13px; border-radius: 26px 26px 0 0; border: 3px solid var(--p-accent); border-bottom: 0; opacity: 0.95; }
.theme-card__pill { position: absolute; left: 9px; bottom: 8px; width: 24px; height: 7px; border-radius: 99px; background: var(--p-cta); }
.theme-card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.theme-card__name { font-family: var(--font-display); font-weight: 400; font-size: 1rem; color: var(--text); }
.theme-card__tag { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.theme-card__blurb { font-size: 0.76rem; line-height: 1.4; color: var(--text-3); margin-top: -4px; }
.theme-card[aria-checked="true"] .theme-card__tag::after { content: "· on"; margin-left: 4px; }

/* the preferences row trigger */
.theme-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px 7px 8px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--fill-subtle); color: var(--text); font-size: var(--text-sm); font-weight: 500; transition: background var(--dur-1), border-color var(--dur-1); }
.theme-btn:hover { background: var(--fill); border-color: var(--hairline-strong); }
.theme-btn__dot { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, var(--p-bg, var(--bg)) 50%, var(--p-accent, var(--accent)) 50%); border: 1px solid var(--hairline-strong); flex: none; }
.theme-btn .chev { margin-left: 2px; }

/* ---- switching: a short crossfade over every painted surface ---- */
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color .5s ease, color .5s ease, border-color .5s ease, fill .5s ease, stroke .5s ease, box-shadow .5s ease !important;
}
@media (prefers-reduced-motion: reduce) { html.theme-fade, html.theme-fade * { transition: none !important; } }

/* ---- per-canvas fixes for assets that were painted for Aurora ---- */
/* the wordmark is a bone-on-transparent SVG <img>: invert it on light canvases (hue-rotate keeps the dot green) */
:root[data-scheme="light"] .app-wordmark, :root[data-scheme="light"] .cs-logo { filter: invert(1) hue-rotate(180deg); }
/* the momentum ring's SVG gradient is Aurora-cyan; every other canvas takes its own --ring-m */
:root:not([data-theme="dark"]) .ring-momentum { stroke: var(--ring-m); }

/* ---- the auth gate is the brand's front door: it always renders in Aurora's dark register,
   whatever canvas the rep picked for the app behind it ---- */
:root[data-scheme="light"] .auth-gate {
  --bg: #0f1011; --bg-tint: #121316; --card: #0b0c0e; --card-solid: #0c0d10; --card-2: #15161a; --surface-2: #1b1d22;
  --hairline: rgba(245, 245, 247, 0.09); --hairline-strong: rgba(245, 245, 247, 0.16); --highlight: rgba(245, 245, 247, 0.04);
  --fill-subtle: rgba(245, 245, 247, 0.04); --fill: rgba(245, 245, 247, 0.08); --ink: 245, 245, 247; --inset: rgba(0, 0, 0, 0.26);
  --text: #f5f7f8; --text-2: #9fa1a3; --text-3: #6a6b6b; --text-4: #46484c;
  --accent: #00b3dd; --accent-press: #0a93b5; --signal-bright: #34ccef; --cta-bg: #ffffff; --cta-fg: #0c0d10; --on-accent: #06222b;
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4); --sh-2: 0 8px 24px -8px rgba(0, 0, 0, 0.55); --sh-3: 0 24px 60px -16px rgba(0, 0, 0, 0.72);
  color-scheme: dark;
}