/* 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 five 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-sky: light-dark(var(--sky-100), var(--sky-950));
  --color-surface-purple: light-dark(var(--purple-100), var(--purple-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-sky: light-dark(var(--sky-600), var(--sky-400));
  --color-text-purple: light-dark(var(--purple-600), var(--purple-400));

  /* 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 sticky
     tab bar, 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;
}