/* Our differences from css-zero's base.css, which stays stock. Loads after it, so these win. */

:root {
  --color-primary: light-dark(var(--teal-600), var(--teal-400));

  /* The one token behind every focus ring css-zero draws — input, button, switch, combobox. Stock
     is a blue of its own, unrelated to the theme colour. (CAR-506) */
  --color-selected-dark: var(--color-primary);

  /* Surface/text pairs for the badge hues, on the same recipe as stock's `--color-surface-negative`
     / `--color-text-negative`, so the four read as one set. */
  --color-surface-green: light-dark(var(--green-100), var(--green-950));
  --color-surface-blue: light-dark(var(--blue-100), var(--blue-950));
  --color-surface-orange: light-dark(var(--orange-100), var(--orange-950));
  --color-text-green: light-dark(var(--green-600), var(--green-400));
  --color-text-blue: light-dark(var(--blue-600), var(--blue-400));
  --color-text-orange: light-dark(var(--orange-600), var(--orange-400));

  /* The three verdicts a compliance status card draws, named for the verdict rather than the hue.
     Each reads the pair its badge reads, so one status keeps one colour wherever it appears. */
  --color-tone-ok: var(--color-text-green);
  --color-tone-warn: var(--color-text-orange);
  --color-tone-alert: var(--color-text-negative);

  /* The rail beside a record page's main column. A fixed width, so a wider viewport widens the
     record rather than its facts. */
  --rail-inline-size: var(--size-80); /* 320px */

  /* The designs' canvas: a warm off-white. Stock is plain white, which is also `--color-surface`,
     so a card had nothing to lift off. Everything reading this token follows the page — the
     selected segmented tab, the avatar ring — while a card, a button and a popover stay white on
     `--color-surface`. Dark mode keeps stock's zinc-950. */
  --color-bg: light-dark(oklch(99% 0.003 80), var(--zinc-950));
}

body {
  /* The designs' rendering. WebKit's default lays type down with subpixel antialiasing, which puts
     colour fringes on every stem and reads as a heavier face at the same weight; grayscale gives
     back the thinner letters the designs show. Type-wide, so headings and body agree. */
  -webkit-font-smoothing: antialiased;
}