/*
  Design tokens — transcribed verbatim from design-system/MASTER.md.

  MASTER.md is authoritative. If a value here disagrees with it, this file is wrong.
  Never add a colour, radius or duration that does not exist there: the rule is that a
  value becomes a token in MASTER.md first, and only then appears in CSS.

  A test asserts that every colour literal in the UI projects appears in MASTER.md, so an
  ad-hoc hex fails the build rather than quietly shipping.
*/

:root {
  /* --- Colour: light (authoritative, designed first) ------------------------------ */
  --bg: #FCFCFD;
  --surface: #FFFFFF;
  --surface-sunken: #F5F6F8;
  --text: #16181D;
  --text-muted: #5B6270;
  --border: #E4E6EB;
  --accent: #5E6AD2;
  --accent-text: #4A54C9;
  --accent-wash: #F0F1FC;
  --error: #B42318;
  --success: #067647;
  --warning: #B54708;

  /* --- Type --------------------------------------------------------------------- */
  /* Three faces, each doing exactly one job. The serif is for generated-document
     bodies and PDF export only — never chrome. No fourth family, ever. */
  --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
  --font-document: 'IBM Plex Serif', Georgia, serif;
  --font-data: 'IBM Plex Mono', ui-monospace, monospace;

  /* 1.200 minor third, 15px base. Small and precise — restraint over drama. */
  --text-caption: 12px;
  --text-small: 13px;
  --text-body: 15px;
  --text-h3: 18px;
  --text-h2: 21px;
  --text-h1: 26px;

  /* Weights 400/500/600 only. Never 300 or lighter — it fails at 15px on --text-muted. */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* --- Space, radius, structure -------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius: 6px;
  --radius-card: 8px;
  --radius-pill: 999px;

  /* 1px hairlines are the primary structural device, in place of shadows. Shadows are
     for true elevation only — modal, popover, dropdown. Never for cards. */
  --border-width: 1px;
  --shadow-overlay: 0 8px 24px rgb(22 24 29 / 12%);

  --width-dashboard: 1440px;
  --measure-document: 68ch;

  /* --- Motion -------------------------------------------------------------------- */
  --duration: 150ms;
  --duration-enter: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

:root[data-theme="dark"] {
  /* Dark is a full peer — contrast-verified, never an afterthought. */
  --bg: #0E0F13;
  --surface: #16181D;
  --surface-sunken: #0A0B0E;
  --text: #EDEEF2;
  --text-muted: #9BA1AF;
  --border: #24262E;
  --accent: #8D96F0;
  --accent-text: #8D96F0;
  --accent-wash: #1A1C2B;
  --error: #F97066;
  --success: #47CD89;
  --warning: #F79009;

  --shadow-overlay: 0 8px 24px rgb(0 0 0 / 48%);
}

/*
  Reduced motion. Streaming still streams — it is information, not decoration — but
  crossfades and the approval-seam settle become instant state changes.
*/
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0ms;
    --duration-enter: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}