/* ═══════════════════════════════════════════════════════════
   Slop O'Meter Web App — v2 theme overrides
   Load AFTER ../../webapp/css/app.css. Every component rule in that
   file is var()-driven, so redefining these ~90 lines re-skins the
   whole shared component set (buttons, cards, sidebar, results panel,
   forms) without duplicating it. v2 used to ship its own full copy of
   app.css with just this block changed — same ~6000 lines maintained
   twice, silently drifting on every future shared-component fix (case
   in point: the login/signup sidebar fix landed in v1's app.css and
   had to be hand-ported here). This file is the whole diff.

   Style reference: mystical-steppe-package-44 (a travel-brand template,
   used for palette/type/shadow direction only, no content). v1 was
   dark-first; this flips to LIGHT-first to match the reference — dark
   is still fully supported, just the explicit/derived variant instead
   of the default. Semantic tier colors (green/yellow/red/blue/purple)
   are warmed, not replaced — they carry functional meaning (score
   tiers, flag severity, speaker labels) elsewhere in the app and must
   stay recognizable as that same semantic family.
   ═══════════════════════════════════════════════════════════ */

/* ───── Theme tokens (light = default) ─────
   Also matched explicitly as [data-theme="light"]: v1's shared app.css has
   its OWN [data-theme="light"] block (old amber tokens) for when someone
   toggles light mode there. Same-specificity selectors fall back to
   whichever rule a browser sees last in the cascade, and since this file's
   bare :root doesn't target [data-theme="light"] at all, v1's amber block
   was the only match and won — the bug that put the orange gradient back
   on the v2 landing page. Matching both selectors here closes that gap. */
:root, [data-theme="light"] {
  --bg: #f9fafb;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --surface-3: #e5e7eb;
  --border: rgba(17,24,39,0.08);
  --border-strong: rgba(17,24,39,0.15);
  --border-accent: rgba(79,70,229,0.18);
  --text: #111827;
  --text-2: #4b5563;
  --text-3: #9ca3af;
  --accent: #4f46e5;
  --accent-light: rgba(79,70,229,0.10);
  --accent-glow: rgba(79,70,229,0.14);
  --accent-solid: #4f46e5;
  --accent-2: #4f46e5;
  --green: #16a34a;
  --green-bg: rgba(22,163,74,0.08);
  --lime: #65a30d;
  --yellow: #d97706;
  --orange: #ea580c;
  --red: #dc2626;
  --blue: #2563eb;
  --blue-bg: rgba(37,99,235,0.08);
  --purple: #7c3aed;
  --purple-bg: rgba(124,58,237,0.08);
  --radius: 24px;
  --radius-sm: 16px;
  --radius-xs: 10px;
  --shadow: 0 1px 2px rgba(17,24,39,0.05);
  --shadow-md: 0 8px 24px rgba(17,24,39,0.08), 0 2px 6px rgba(17,24,39,0.05);
  --shadow-lg: 0 24px 60px rgba(17,24,39,0.10), 0 4px 12px rgba(17,24,39,0.06);
  --shadow-xl: 0 32px 80px rgba(17,24,39,0.14);
  --header-h: 52px;
  --sidebar-w: 200px;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
  --panel-w: 380px;
}

/* ───── Theme tokens (dark, near-monochrome + one electric indigo accent) ───── */
[data-theme="dark"] {
  --bg: #0a0b0f;
  --surface: #14161d;
  --surface-2: #1c1f28;
  --surface-3: #262a35;
  --border: rgba(240,240,245,0.07);
  --border-strong: rgba(240,240,245,0.14);
  --border-accent: rgba(99,102,241,0.2);
  --text: #f3f4f6;
  --text-2: rgba(243,244,246,0.6);
  --text-3: rgba(243,244,246,0.32);
  --accent: #6366f1;
  --accent-light: rgba(99,102,241,0.14);
  --accent-glow: rgba(99,102,241,0.22);
  --accent-solid: #6366f1;
  --accent-2: #6366f1;
  --green: #22c55e;
  --green-bg: rgba(34,197,94,0.1);
  --lime: #a3e635;
  --yellow: #eab308;
  --orange: #f97316;
  --red: #ef4444;
  --blue: #3b82f6;
  --blue-bg: rgba(59,130,246,0.12);
  --purple: #a78bfa;
  --purple-bg: rgba(167,139,250,0.12);
  --shadow: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3);
  --shadow-xl: 0 32px 80px rgba(0,0,0,0.45);
}

/* First-time visitors (nothing saved in localStorage, so no data-theme
   attribute is set at all) get their OS preference instead of always being
   forced into the light brand default. `:not([data-theme="light"])` means an
   explicit light toggle still wins even on a dark-OS system — this only
   fills in for visitors who haven't chosen either way yet. Values duplicated
   from [data-theme="dark"] above rather than shared, since this project has
   no CSS build step to factor them out. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0b0f;
    --surface: #14161d;
    --surface-2: #1c1f28;
    --surface-3: #262a35;
    --border: rgba(240,240,245,0.07);
    --border-strong: rgba(240,240,245,0.14);
    --border-accent: rgba(99,102,241,0.2);
    --text: #f3f4f6;
    --text-2: rgba(243,244,246,0.6);
    --text-3: rgba(243,244,246,0.32);
    --accent: #6366f1;
    --accent-light: rgba(99,102,241,0.14);
    --accent-glow: rgba(99,102,241,0.22);
    --accent-solid: #6366f1;
    --accent-2: #6366f1;
    --green: #22c55e;
    --green-bg: rgba(34,197,94,0.1);
    --lime: #a3e635;
    --yellow: #eab308;
    --orange: #f97316;
    --red: #ef4444;
    --blue: #3b82f6;
    --blue-bg: rgba(59,130,246,0.12);
    --purple: #a78bfa;
    --purple-bg: rgba(167,139,250,0.12);
    --shadow: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
    --shadow-lg: 0 24px 60px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3);
    --shadow-xl: 0 32px 80px rgba(0,0,0,0.45);
  }
}

/* v1's shared app.css also has its own @media(prefers-color-scheme:light)
   block, scoped to :root:not([data-theme="dark"]) — that selector carries
   MORE specificity (0,2,0,0) than this file's plain `:root` above (0,1,0,0),
   so on any browser with OS light mode and no explicit data-theme set, v1's
   amber block was winning regardless of load order — specificity beats
   source order when they conflict. This is the bug that put the orange
   gradient/buttons back after the [data-theme="light"] fix; matching v1's
   exact selector here (not just adding another bare :root rule) is what
   actually closes it, since only equal specificity lets load order decide. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f9fafb;
    --surface: #ffffff;
    --surface-2: #f3f4f6;
    --surface-3: #e5e7eb;
    --border: rgba(17,24,39,0.08);
    --border-strong: rgba(17,24,39,0.15);
    --border-accent: rgba(79,70,229,0.18);
    --text: #111827;
    --text-2: #4b5563;
    --text-3: #9ca3af;
    --accent: #4f46e5;
    --accent-light: rgba(79,70,229,0.10);
    --accent-glow: rgba(79,70,229,0.14);
    --accent-solid: #4f46e5;
    --accent-2: #4f46e5;
    --green: #16a34a;
    --green-bg: rgba(22,163,74,0.08);
    --lime: #65a30d;
    --yellow: #d97706;
    --orange: #ea580c;
    --red: #dc2626;
    --blue: #2563eb;
    --blue-bg: rgba(37,99,235,0.08);
    --purple: #7c3aed;
    --purple-bg: rgba(124,58,237,0.08);
    --shadow: 0 1px 2px rgba(17,24,39,0.05);
    --shadow-md: 0 8px 24px rgba(17,24,39,0.08), 0 2px 6px rgba(17,24,39,0.05);
    --shadow-lg: 0 24px 60px rgba(17,24,39,0.10), 0 4px 12px rgba(17,24,39,0.06);
    --shadow-xl: 0 32px 80px rgba(17,24,39,0.14);
  }
}

/* White text reads on indigo where v1's dark ink read on amber — the two
   accents have different luminance, so every hardcoded (non-token)
   contrast choice in the shared file needs a v2-specific override too.
   Same reasoning for all five below — found during the app.css amber
   sweep, each is a var(--accent)/accent-gradient background paired with a
   literal color:#000 that only reads correctly on the old light amber. */
.btn-accent { background: var(--accent); color: #fff; }
.toolbar-btn-accent,
.toolbar-btn-accent:hover,
.live-speed-btn.is-active,
.rewrite-chat-send,
.social-pill.active { color: #fff; }
.toolbar-btn.btn-ready { color: #fff !important; }