/* ResearchAssistant design tokens — extracted from index.html inline <style>
 *
 * Wave D of the v3 hardcode refactor (TODO #HARDCODE-AUDIT-V2-CSS-COLOR-LITERALS)
 * moves the canonical color/shadow tokens out of index.html so additional pages
 * (static/account.html, static/vault.html, …) can share them.
 *
 * Computed-style invariant: every var(--*) declaration here must resolve to
 * exactly the value previously inlined at index.html lines 60–61. Adding new
 * tokens is fine; changing existing ones is a visible UI change and must go
 * through a separate design-review task.
 *
 * Cascade note: <link rel="stylesheet" href="/static/_tokens.css"> must be
 * loaded BEFORE the inline <style> block in each consuming page so subsequent
 * rules can still override on equal specificity. Dark mode opt-in stays
 * explicit via [data-theme="dark"] (set by JS); we deliberately do not flip
 * the palette via prefers-color-scheme so the UI looks identical to pre-Wave-D.
 */

:root {
  --bg: #f8fafc;
  --bg2: #ffffff;
  --bg3: #f1f5f9;
  --text: #0f172a;
  --text2: #475569;
  --text3: #94a3b8;
  --border: #e2e8f0;
  --accent: #2563eb;
  --accent2: #3b82f6;
  --red: #ef4444;
  --yellow: #f59e0b;
  --green: #10b981;
  --purple: #8b5cf6;
  --pink: #ec4899;
  --sidebar-bg: #0f172a;
  --sidebar-text: #cbd5e1;
  --sidebar-active: #1e293b;
  --shadow: 0 1px 3px rgba(0, 0, 0, .1);
  --shadow2: 0 4px 6px -1px rgba(0, 0, 0, .1);

  /* Wave-R9 extension (2026-05-21) — theme-invariant raw color tokens.
   * Added for high-frequency inline hex literals in JSX style props
   * and CSS-block declarations. Each token below has NO dark-mode
   * override on purpose: the literals it replaces are always-on-light
   * or always-on-dark UI (sidebar text, status colors, brand accents)
   * and must NOT flip when [data-theme="dark"] toggles. Adding a dark
   * override here = visible UI regression.
   */
  --white: #ffffff;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-700: #475569;
  --slate-900: #0f172a;
  --gray-500: #6b7280;
  --red2: #dc2626;
  --red-mid: #b91c1c;
  --red-deep: #991b1b;
  --red-dark: #7f1d1d;
  --red-light: #f87171;
  --red-text2: #c53030;
  --red-bg: #fef2f2;
  --red-bg2: #fecaca;
  --red-bg3: #fee2e2;
  --cyan: #06b6d4;
  --cyan-bg: #cffafe;
  --orange: #f97316;
  --orange-bg: #fed7aa;
  --yellow-bg: #fef3c7;
  --yellow-text: #b45309;
  --yellow-text2: #92400e;
  --blue-bg: #dbeafe;
  --blue-text: #1d4ed8;
  --blue-light: #93c5fd;
  --green-bg: #d1fae5;
  --green-text: #047857;
  --purple-bg: #ede9fe;
  --purple-text: #6d28d9;
  --pink-bg: #fce7f3;
  --pink-text: #be185d;
  --sky-500: #0ea5e9;
  --indigo-500: #6366f1;
  --zinc-400: #a1a1aa;
}

[data-theme="dark"] {
  --bg: #0f172a;
  --bg2: #1e293b;
  --bg3: #334155;
  --text: #f1f5f9;
  --text2: #94a3b8;
  --text3: #64748b;
  --border: #334155;
  --shadow: 0 1px 3px rgba(0, 0, 0, .3);
  --shadow2: 0 4px 6px -1px rgba(0, 0, 0, .3);
}