/* Shared visual tokens. Loaded after the legacy component styles so every
   existing component uses the same palette. No study state lives here. */
:root {
  color-scheme: light dark;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-reading: var(--font);
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --type-label: .8125rem;
  --type-small: .875rem;
  --type-body: 1rem;
  --type-reading: 1.125rem;
  --type-section: 1.25rem;
  --type-title: clamp(1.75rem, 3vw, 2rem);
  --leading-body: 1.6;
  --weight-normal: 400;
  --weight-emphasis: 600;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --radius-sm: 7px;
  --radius: 10px;
  --reading-width: 760px;
  --tap-target: 44px;
  --motion: 180ms ease;
  /* All palette values live here. Light accents are darkened for AA text. */
  --bg: #F6F7F8; --surface: #FFFFFF; --surface-2: #F0F2F4; --surface-3: #E8ECEF;
  --ink: #13171C; --muted: #505B67; --line: #DDE1E5; --line-soft: #E4E7EB; --field-line: #73808C;
  --accent: #087387; --accent-text: var(--accent); --accent-soft: #E8F3F5;
  --primary: var(--accent); --primary-hover: #066173; --primary-ink: #FFFFFF;
  --warn: #A65309; --error: #BB3030; --focus: var(--accent);
  --shadow-color: #00000012; --shadow-deep: #00000033; --backdrop: #0B0D10B3;
  --image-bg: #000000; --image-annotation: #67E8F9;
  --selection-bg: #087387; --selection-ink: #FFFFFF;
  --accent-glow: #08738712; --accent-glow-soft: #08738708;
  --side: var(--surface); --side-2: var(--accent-soft); --side-line: var(--line);
  --side-ink: var(--ink); --side-muted: var(--muted);
  --accent-blue: var(--accent); --accent-violet: var(--accent); --teal-soft: var(--accent-soft); --blue-soft: var(--surface-2);
  --lime: var(--accent); --lime-ink: var(--primary-ink); --ok: var(--accent);
  --amber-bg: var(--surface); --amber-line: var(--warn); --amber-ink: var(--warn); --amber-strong: var(--warn);
  --amber-badge: var(--surface-2); --amber-badge-ink: var(--warn); --error-bg: var(--surface);
  --user-bubble: var(--surface-2); --user-ink: var(--ink); --assistant-bg: var(--surface);
  --composer-bg: var(--surface); --composer-line: var(--field-line); --composer-glow: var(--accent-glow);
  --shadow: 0 12px 32px var(--shadow-color);
  --step-now-bg: var(--accent-soft); --step-now-line: var(--accent); --step-now-text: var(--accent-text);
  --s-unseen-line: var(--line); --s-unseen-ink: var(--muted); --s-unseen-hatch: var(--surface-2);
  --s-building: var(--surface-2); --s-building-line: var(--field-line); --s-building-ink: var(--ink);
  --s-practicing: var(--accent-soft); --s-practicing-line: var(--accent); --s-practicing-ink: var(--ink);
  --s-functional: var(--accent-soft); --s-functional-line: var(--accent); --s-functional-ink: var(--ink);
  --s-transfer: var(--accent-soft); --s-transfer-ink: var(--ink);
  --s-stable: var(--accent-soft); --s-stable-ink: var(--accent-text); --s-stable-ring: var(--accent);
  --neglect: var(--warn); --neglect-ink: var(--warn); --selected-ring: var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0D10; --surface: #12161B; --surface-2: #181D23; --surface-3: #20262E;
    --ink: #E8ECEF; --muted: #9AA3AD; --line: #252B33; --line-soft: #222830; --field-line: #64707D;
    --accent: #5FD4E6; --accent-soft: #14272C; --primary-hover: #8BE1EE; --primary-ink: #0B0D10;
    --warn: #F2A65A; --error: #EF6B6B;
    --shadow-color: #00000028; --shadow-deep: #00000066;
    --selection-bg: #5FD4E6; --selection-ink: #0B0D10;
    --accent-glow: #5FD4E612; --accent-glow-soft: #5FD4E608;
  }
}