/* Design tokens — v0.2, Material Design 3-inspired palette from design/v2/*
   mockups. Every Taji component reads these vars; none hardcode a hex
   directly. See docs/specs/Taji_QI_Module_Web_Design_Spec.md §1 for the
   narrative spec this file implements. */
[data-theme="taji"] {
  /* §1.1 color — core M3 roles */
  --brand-primary: #003c90;
  --brand-primary-container: #0f52ba;
  --on-primary-container: #bcceff;
  --brand-secondary: #505f76;
  --brand-secondary-container: #d0e1fb;
  --on-secondary-container: #54647a;
  /* Teal is Taji's AI/agent identity accent (Taji Insights panel, chat
     bubbles, "Draft with Taji" affordances) — distinct from brand blue so
     AI-authored content is always visually distinguishable from
     physician-authored content, per design spec §3.9. */
  --tertiary: #004943;
  --tertiary-container: #00635b;
  --on-tertiary: #ffffff;
  --on-tertiary-container: #73e0d2;
  --ink: #263143;
  --bg-canvas: #f9f9ff;
  --bg-card: #ffffff;
  --surface-container: #e7eeff;
  --surface-container-low: #f0f3ff;
  --surface-container-high: #dee8ff;
  --surface-container-highest: #d8e3fb;
  --tint-1: rgba(15, 82, 186, 0.1);
  --tint-2: rgba(0, 73, 67, 0.08);
  --border-subtle: rgba(195, 198, 213, 0.35);
  --border-strong: #737784;
  --border-tint: #bcceff;
  --border-tint-2: #d0e1fb;
  --text-primary: #111c2d;
  --text-body: #434653;
  --text-body-strong: #30333d;
  --text-secondary: #434653;
  --success: #146c2e;
  --success-text: #0f5423;
  --warning: #8a5300;
  --warning-text: #6e4200;
  --critical: #ba1a1a;
  --critical-text: #93000a;
  --accent-fuchsia: #c026d3;
  --on-brand: #ffffff;
  /* Soft-badge tints (§3.8/§3.9 "light-tint-bg/saturated-text" pattern) —
     not in the core token table but still named, never inlined in Go. */
  --success-tint: #e3f6e9;
  --warning-tint: #fff1de;
  --critical-tint: #ffdad6;
  --warning-border: #f2c98a;
  --tab-track: var(--surface-container);
  /* Surfaces/text used across tabs added during Phases 6-8 — added here
     retroactively during the final QA pass after a hex-literal audit
     found them inlined directly in .templ files instead. */
  --surface-subtle: var(--surface-container-low);
  --muted: #5f6373;
  /* §3.3 True North secondary selected-chip text; §3.4 PDSA prediction
     block text — both read against the teal --tint-2 fill above. */
  --tint-2-text: #00635b;
  /* §3.2 rigor-banner text (design spec's method-fidelity callout) — reads
     against the primary --tint-1 fill. */
  --rigor-text: #003c90;
  /* Chart-only per §1.1: retired as a text color (fails AA); it survives
     only as chart gridline/dot fills. */
  --chart-gridline: #c3c6d5;
  /* Sidebar (--ink) foreground — inverse-surface/inverse-on-surface pair. */
  --inverse-on-surface: #ecf1ff;

  /* §1.3 space / radius / elevation */
  --space-1: 4px;
  --radius-card: 8px;
  --radius-inner: 4px;
  --radius-pill: 999px;
  --card-shadow: 0 1px 2px rgba(17, 28, 45, 0.04), 0 1px 3px rgba(17, 28, 45, 0.08);
  --card-shadow-hover: 0 4px 12px rgba(17, 28, 45, 0.12);
  --hero-gradient: linear-gradient(120deg, #111c2d, #003c90 62%, #0f52ba);
  --hero-shadow: 0 8px 24px rgba(17, 28, 45, 0.22);

  /* DaisyUI v5 semantic mapping — DaisyUI accepts any CSS color, so these
     point straight at the literal tokens above rather than an OKLCH
     approximation. */
  --color-base-100: var(--bg-card);
  --color-base-200: var(--bg-canvas);
  --color-base-300: var(--border-strong);
  --color-base-content: var(--text-primary);
  --color-primary: var(--brand-primary);
  --color-primary-content: #ffffff;
  --color-secondary: var(--brand-secondary);
  --color-secondary-content: #ffffff;
  --color-neutral: var(--ink);
  --color-neutral-content: var(--inverse-on-surface);
  --color-info: var(--tertiary-container);
  --color-info-content: #ffffff;
  --color-success: var(--success);
  --color-success-content: #ffffff;
  --color-warning: var(--warning);
  --color-warning-content: #ffffff;
  --color-error: var(--critical);
  --color-error-content: #ffffff;
  --radius-box: var(--radius-card);
  --radius-field: var(--radius-inner);
  --radius-selector: var(--radius-inner);
}

/* §4 focus state — visible everywhere, never `outline: none` without a
   replacement. Scoped to :focus-visible so mouse clicks don't show it. */
[data-theme="taji"] :focus-visible {
  outline: 2px solid #003c90;
  outline-offset: 2px;
}