/*
 * Design tokens.
 *
 * Direction: a clinical reading room. Light, quiet chrome so nothing competes
 * with the images; a near-black stage for the pixels themselves; one saturated
 * accent reserved for actions, and separate semantic colours for the teaching
 * states (normal cohort / disease cohort / expert annotation) so those never
 * read as decoration.
 */

:root {
  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --surface-page: oklch(97.5% 0.004 250);
  --surface-card: oklch(100% 0 0);
  --surface-sunken: oklch(96% 0.005 250);
  --surface-raised: oklch(100% 0 0);
  --surface-stage: oklch(16% 0.012 255);
  --surface-stage-deep: oklch(11% 0.01 255);
  --surface-inverse: oklch(21% 0.015 255);

  /* ── Text ────────────────────────────────────────────────────────────── */
  --text-strong: oklch(24% 0.02 255);
  --text-body: oklch(42% 0.018 255);
  --text-muted: oklch(58% 0.015 255);
  --text-faint: oklch(70% 0.012 255);
  --text-on-dark: oklch(96% 0.004 250);
  --text-on-accent: oklch(100% 0 0);

  /* ── Lines ───────────────────────────────────────────────────────────── */
  --border-subtle: oklch(92% 0.006 250);
  --border-default: oklch(87% 0.008 250);
  --border-strong: oklch(78% 0.01 250);

  /* ── Accent + semantics ──────────────────────────────────────────────── */
  --accent: oklch(52% 0.19 258);
  --accent-hover: oklch(46% 0.2 258);
  --accent-wash: oklch(52% 0.19 258 / 0.09);
  --accent-line: oklch(52% 0.19 258 / 0.28);

  --normal: oklch(58% 0.14 162);
  --normal-wash: oklch(58% 0.14 162 / 0.1);
  --disease: oklch(56% 0.2 25);
  --disease-wash: oklch(56% 0.2 25 / 0.1);
  --expert: oklch(62% 0.18 300);
  --expert-wash: oklch(62% 0.18 300 / 0.1);
  --caution: oklch(66% 0.15 75);
  --caution-wash: oklch(66% 0.15 75 / 0.12);

  /* ── Type ────────────────────────────────────────────────────────────── */
  --font-ui: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --text-xs: 0.74rem;
  --text-sm: 0.82rem;
  --text-base: 0.92rem;
  --text-md: 1.02rem;
  --text-lg: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --text-xl: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  --text-2xl: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);

  --leading-tight: 1.25;
  --leading-normal: 1.55;
  --leading-prose: 1.75;

  /* ── Space ───────────────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 30px;
  --space-7: 42px;
  --space-8: 60px;

  /* ── Shape + depth ───────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px oklch(20% 0.02 255 / 0.05);
  --shadow-md: 0 2px 4px oklch(20% 0.02 255 / 0.05), 0 6px 16px oklch(20% 0.02 255 / 0.06);
  --shadow-lg: 0 4px 8px oklch(20% 0.02 255 / 0.06), 0 16px 40px oklch(20% 0.02 255 / 0.1);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --dur-fast: 130ms;
  --dur-normal: 220ms;
  --dur-slow: 380ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --rail-width: 272px;
  --aside-width: 320px;
  --content-max: 1480px;
}

/*
 * The reading stage is always dark, in both themes — radiologists read on black
 * and a light stage would change the perceived contrast of the pixel data.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --surface-page: oklch(17% 0.012 255);
    --surface-card: oklch(21% 0.014 255);
    --surface-sunken: oklch(19% 0.013 255);
    --surface-raised: oklch(24% 0.015 255);
    --surface-inverse: oklch(28% 0.016 255);

    --text-strong: oklch(96% 0.004 250);
    --text-body: oklch(80% 0.01 250);
    --text-muted: oklch(66% 0.012 250);
    --text-faint: oklch(52% 0.012 250);

    --border-subtle: oklch(27% 0.014 255);
    --border-default: oklch(32% 0.016 255);
    --border-strong: oklch(42% 0.018 255);

    --accent: oklch(68% 0.17 258);
    --accent-hover: oklch(74% 0.16 258);

    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.3);
    --shadow-md: 0 2px 4px oklch(0% 0 0 / 0.3), 0 6px 16px oklch(0% 0 0 / 0.35);
    --shadow-lg: 0 4px 8px oklch(0% 0 0 / 0.35), 0 16px 40px oklch(0% 0 0 / 0.45);
  }
}

:root[data-theme='dark'] {
  --surface-page: oklch(17% 0.012 255);
  --surface-card: oklch(21% 0.014 255);
  --surface-sunken: oklch(19% 0.013 255);
  --surface-raised: oklch(24% 0.015 255);
  --surface-inverse: oklch(28% 0.016 255);

  --text-strong: oklch(96% 0.004 250);
  --text-body: oklch(80% 0.01 250);
  --text-muted: oklch(66% 0.012 250);
  --text-faint: oklch(52% 0.012 250);

  --border-subtle: oklch(27% 0.014 255);
  --border-default: oklch(32% 0.016 255);
  --border-strong: oklch(42% 0.018 255);

  --accent: oklch(68% 0.17 258);
  --accent-hover: oklch(74% 0.16 258);

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.3);
  --shadow-md: 0 2px 4px oklch(0% 0 0 / 0.3), 0 6px 16px oklch(0% 0 0 / 0.35);
  --shadow-lg: 0 4px 8px oklch(0% 0 0 / 0.35), 0 16px 40px oklch(0% 0 0 / 0.45);
}