/* ============================================================================
   CORPUS design tokens
   Reference: the anatomical plate. Specimen-jar ground, bone-white tissue,
   one clinical accent. Everything else is hairline and type. (CLAUDE.md §9)
   ========================================================================== */
:root {
  color-scheme: dark;

  /* --- ground (specimen jar) --- */
  --ground-950: #07171a;
  --ground-900: #0b2024;
  --ground-800: #102b30;
  --ground-700: #17393f;
  --ground-600: #21494f;
  --ground-500: #2d5b62;

  /* --- bone & tissue --- */
  --bone-50: #f7f3eb;
  --bone-100: #efe9dd;
  --bone-200: #ded5c3;
  --bone-300: #c9bda6;
  --bone-400: #a89a80;
  --bone-500: #857862;
  --tissue-300: #d9ab9c;   /* preserved tissue: warnings, "incorrect" */
  --tissue-500: #b4745f;

  /* --- the one clinical accent --- */
  --accent-200: #b8ebe1;
  --accent-300: #86d6c6;
  --accent-500: #3fae9c;
  --accent-700: #22766a;
  --accent-glow: rgba(134, 214, 198, 0.28);

  --gold-300: #e8c46a;     /* focus ring, highlight */

  /* --- semantic --- */
  --bg: var(--ground-900);
  --bg-raised: var(--ground-800);
  --bg-sunken: var(--ground-950);
  --ink: var(--bone-100);
  --ink-strong: var(--bone-50);
  --ink-muted: var(--bone-300);
  --ink-faint: var(--bone-400);
  --line: rgba(239, 233, 221, 0.12);
  --line-strong: rgba(239, 233, 221, 0.26);
  --link: var(--accent-300);
  --focus: var(--gold-300);
  --ok: var(--accent-300);
  --warn: var(--gold-300);
  --bad: var(--tissue-300);

  /* --- mastery render states (CLAUDE.md §4) --- */
  --mastery-ghost: rgba(239, 233, 221, 0.22);
  --mastery-translucent: rgba(239, 233, 221, 0.55);
  --mastery-solid: var(--bone-100);

  /* --- type --- */
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Source Sans 3", "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, ui-monospace, monospace;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.3rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --text-3xl: clamp(2.8rem, 1.6rem + 4.6vw, 5.4rem);
  --leading-tight: 1.1;
  --leading-body: 1.55;
  --measure: 64ch;
  --tracking-caps: 0.12em;

  /* --- space (4pt) --- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 5rem;
  --s-9: 8rem;

  /* --- shape --- */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;
  --hairline: 1px;

  /* --- depth --- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 24px 60px -20px rgba(0, 0, 0, 0.7);

  /* --- motion: reserved for materialisation; everything else is instant-ish --- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-1: 120ms;   /* hover, focus */
  --dur-2: 240ms;   /* reveal */
  --dur-3: 900ms;   /* materialise */

  /* --- layers --- */
  --z-raised: 10;
  --z-sticky: 20;
  --z-overlay: 40;
  --z-toast: 50;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}