/* app/web/static/css/tokens.css
 * Derived VERBATIM from docs/design-system.html (the token source of truth).
 * Do not edit values here - change design-system.html, then re-extract.
 * Kept in sync by tests/web/test_ui_tokens.py::test_tokens_css_matches_design_system
 */
:root {
  /* --- Typography families --- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Code", monospace;

  /* --- Font sizes (type scale) --- */
  --fs-50: 0.75rem;     /* 12 - chips, captions */
  --fs-75: 0.8125rem;   /* 13 - meta, dense ui */
  --fs-100: 0.875rem;   /* 14 - small ui text */
  --fs-200: 0.9375rem;  /* 15 - default ui / body */
  --fs-300: 1rem;       /* 16 - reading body */
  --fs-400: 1.125rem;   /* 18 - lead */
  --fs-500: 1.3125rem;  /* 21 - h4 */
  --fs-600: 1.625rem;   /* 26 - h3 */
  --fs-700: 2rem;       /* 32 - h2 */
  --fs-800: 2.5rem;     /* 40 - h1 */
  --fs-900: 3.25rem;    /* 52 - display */

  /* --- Line heights --- */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* --- Font weights --- */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Letter spacing --- */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.06em;

  /* --- Spacing (4px base) --- */
  --space-0: 0;
  --space-px: 1px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;

  /* --- Radius --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* --- Motion --- */
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Z-index --- */
  --z-base: 1;
  --z-banner: 50;
  --z-topbar: 60;
  --z-sticky: 70;
  --z-overlay: 80;
  --z-dialog: 90;
  --z-toast: 100;

  /* --- Layout --- */
  --topbar-h: 56px;
  --measure: 68ch;      /* reading measure */
  --tap-min: 40px;      /* minimum touch target */
}

/* ===================== LIGHT THEME ===================== */
:root, [data-theme="light"] {
  color-scheme: light;

  /* Surfaces - cool near-white paper */
  --color-canvas: oklch(98.4% 0.004 258);
  --color-surface: oklch(99.6% 0.002 258);
  --color-surface-raised: oklch(100% 0 0);
  --color-surface-sunken: oklch(96.6% 0.005 258);
  --color-surface-hover: oklch(97% 0.006 258);

  /* Ink */
  --color-ink: oklch(26% 0.016 264);
  --color-ink-muted: oklch(44% 0.014 264);
  --color-ink-subtle: oklch(56% 0.012 264);
  --color-ink-faint: oklch(70% 0.010 264);
  --color-ink-inverse: oklch(98% 0.004 258);

  /* Lines */
  --color-line: oklch(91% 0.005 264);
  --color-line-strong: oklch(84% 0.007 264);
  --color-line-faint: oklch(94.5% 0.004 264);

  /* Accent - pastel slate-teal (default) */
  --color-accent: oklch(53% 0.085 216);
  --color-accent-hover: oklch(47% 0.09 216);
  --color-accent-active: oklch(42% 0.09 216);
  --color-accent-ink: oklch(99% 0.005 216);
  --color-accent-tint: oklch(95% 0.03 216);
  --color-accent-tint-strong: oklch(90% 0.05 216);
  --color-accent-text: oklch(45% 0.09 216);
  --color-focus: oklch(55% 0.11 216);
  --color-focus-ring: oklch(55% 0.11 216 / 0.35);

  /* Epistemic status - distinct hues (always paired with label/icon) */
  --color-verified: oklch(52% 0.09 156);
  --color-verified-tint: oklch(94% 0.045 156);
  --color-verified-ink: oklch(38% 0.075 156);

  --color-hypothesis: oklch(53% 0.13 300);
  --color-hypothesis-tint: oklch(94.5% 0.045 300);
  --color-hypothesis-ink: oklch(40% 0.10 300);

  --color-observation: oklch(53% 0.065 244);
  --color-observation-tint: oklch(94.5% 0.028 244);
  --color-observation-ink: oklch(40% 0.055 244);

  --color-decision: oklch(58% 0.10 74);
  --color-decision-tint: oklch(94% 0.052 78);
  --color-decision-ink: oklch(42% 0.082 66);

  /* Temporal validity */
  --color-valid: oklch(52% 0.085 156);
  --color-valid-tint: oklch(94.5% 0.04 156);
  --color-superseded: oklch(53% 0.155 22);
  --color-superseded-tint: oklch(94.5% 0.05 22);
  --color-superseded-ink: oklch(42% 0.13 22);

  /* Authorship (neutral) */
  --color-author-human: oklch(48% 0.02 264);
  --color-author-agent: oklch(53% 0.09 210);
  --color-author-agent-tint: oklch(95% 0.03 210);

  /* Feedback semantics */
  --color-success: oklch(52% 0.10 156);
  --color-success-tint: oklch(94.5% 0.045 156);
  --color-success-ink: oklch(38% 0.08 156);

  --color-warning: oklch(62% 0.12 82);
  --color-warning-tint: oklch(95% 0.058 84);
  --color-warning-ink: oklch(44% 0.088 68);

  --color-danger: oklch(52% 0.175 25);
  --color-danger-hover: oklch(47% 0.18 25);
  --color-danger-active: oklch(42% 0.18 25);
  --color-danger-tint: oklch(95% 0.045 25);
  --color-danger-ink: oklch(43% 0.15 25);

  --color-info: oklch(54% 0.10 246);
  --color-info-tint: oklch(95% 0.032 246);
  --color-info-ink: oklch(40% 0.082 246);

  /* Area categorical palette (life areas) */
  --color-area-1: oklch(55% 0.10 274);
  --color-area-2: oklch(55% 0.09 156);
  --color-area-3: oklch(58% 0.10 42);
  --color-area-4: oklch(55% 0.11 330);
  --color-area-5: oklch(54% 0.08 210);
  --color-area-6: oklch(56% 0.09 122);

  /* Highlight (search match) */
  --color-highlight: oklch(91% 0.11 100);
  --color-highlight-ink: oklch(35% 0.09 80);

  /* Shadows */
  --shadow-sm: 0 1px 2px oklch(26% 0.02 264 / 0.06);
  --shadow-md: 0 2px 6px oklch(26% 0.02 264 / 0.07), 0 1px 2px oklch(26% 0.02 264 / 0.06);
  --shadow-lg: 0 10px 34px oklch(26% 0.03 264 / 0.14), 0 2px 6px oklch(26% 0.02 264 / 0.07);
  --shadow-inset: inset 0 1px 2px oklch(26% 0.02 264 / 0.06);
}

/* ===================== DARK THEME ===================== */
[data-theme="dark"] {
  color-scheme: dark;

  --color-canvas: oklch(20.5% 0.012 264);
  --color-surface: oklch(24% 0.013 264);
  --color-surface-raised: oklch(27.5% 0.014 264);
  --color-surface-sunken: oklch(17.5% 0.011 264);
  --color-surface-hover: oklch(29% 0.015 264);

  --color-ink: oklch(92% 0.010 264);
  --color-ink-muted: oklch(76% 0.012 264);
  --color-ink-subtle: oklch(63% 0.012 264);
  --color-ink-faint: oklch(50% 0.011 264);
  --color-ink-inverse: oklch(22% 0.012 264);

  --color-line: oklch(34% 0.012 264);
  --color-line-strong: oklch(44% 0.013 264);
  --color-line-faint: oklch(29% 0.011 264);

  --color-accent: oklch(75% 0.09 210);
  --color-accent-hover: oklch(80% 0.09 210);
  --color-accent-active: oklch(71% 0.10 210);
  --color-accent-ink: oklch(20% 0.03 210);
  --color-accent-tint: oklch(33% 0.05 210);
  --color-accent-tint-strong: oklch(40% 0.07 210);
  --color-accent-text: oklch(81% 0.08 210);
  --color-focus: oklch(79% 0.10 210);
  --color-focus-ring: oklch(79% 0.10 210 / 0.40);

  --color-verified: oklch(72% 0.11 156);
  --color-verified-tint: oklch(33% 0.055 156);
  --color-verified-ink: oklch(84% 0.10 156);

  --color-hypothesis: oklch(74% 0.12 300);
  --color-hypothesis-tint: oklch(34% 0.065 300);
  --color-hypothesis-ink: oklch(85% 0.10 300);

  --color-observation: oklch(74% 0.08 244);
  --color-observation-tint: oklch(33% 0.04 244);
  --color-observation-ink: oklch(85% 0.07 244);

  --color-decision: oklch(78% 0.11 78);
  --color-decision-tint: oklch(35% 0.06 74);
  --color-decision-ink: oklch(87% 0.10 80);

  --color-valid: oklch(72% 0.10 156);
  --color-valid-tint: oklch(33% 0.05 156);
  --color-superseded: oklch(72% 0.15 24);
  --color-superseded-tint: oklch(35% 0.08 24);
  --color-superseded-ink: oklch(85% 0.13 24);

  --color-author-human: oklch(72% 0.02 264);
  --color-author-agent: oklch(74% 0.09 210);
  --color-author-agent-tint: oklch(33% 0.045 210);

  --color-success: oklch(72% 0.11 156);
  --color-success-tint: oklch(33% 0.055 156);
  --color-success-ink: oklch(85% 0.10 156);

  --color-warning: oklch(80% 0.12 84);
  --color-warning-tint: oklch(37% 0.07 78);
  --color-warning-ink: oklch(88% 0.11 84);

  --color-danger: oklch(70% 0.17 25);
  --color-danger-hover: oklch(75% 0.17 25);
  --color-danger-active: oklch(66% 0.17 25);
  --color-danger-tint: oklch(34% 0.08 25);
  --color-danger-ink: oklch(84% 0.14 25);

  --color-info: oklch(74% 0.10 246);
  --color-info-tint: oklch(33% 0.05 246);
  --color-info-ink: oklch(85% 0.09 246);

  --color-area-1: oklch(75% 0.10 274);
  --color-area-2: oklch(74% 0.09 156);
  --color-area-3: oklch(78% 0.10 42);
  --color-area-4: oklch(74% 0.11 330);
  --color-area-5: oklch(74% 0.08 210);
  --color-area-6: oklch(75% 0.09 122);

  --color-highlight: oklch(50% 0.11 100);
  --color-highlight-ink: oklch(94% 0.06 100);

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.30);
  --shadow-md: 0 2px 8px oklch(0% 0 0 / 0.36), 0 1px 2px oklch(0% 0 0 / 0.30);
  --shadow-lg: 0 12px 40px oklch(0% 0 0 / 0.50), 0 2px 8px oklch(0% 0 0 / 0.36);
  --shadow-inset: inset 0 1px 2px oklch(0% 0 0 / 0.30);
}