/*
  Theme tokens, shared by every page.

  The site stores its theme in localStorage and broadcasts `ypi-theme-changed`
  (see js/theme.js). Each page stamps `data-theme` on <html> before first paint,
  and these rules supply the matching palette. Keep the dark values in sync with
  THEMES.dark in js/theme.js.

  This lives in its own file because a page that stamps the attribute without
  loading the palette gets the worst of both: theme-dependent rules (like the
  header's logo swap) fire while the colours stay light.
*/

:root {
  --status-ok: var(--color-primary-hover);
  --status-error: var(--color-danger);
}

:root[data-theme="dark"] {
  --color-bg: #141613;
  --soft-white: #141613;
  --white: #1C1F1B;
  --color-surface: #1C1F1B;
  --color-surface-sunken: #20251F;
  --color-border: #343B33;
  --color-text: #F5F5F0;
  --color-text-muted: #A3AFA4;

  /*
    Additions beyond the DS: the light-mode status colours do not clear 4.5:1 on
    the dark ground (#148324 → 3.7:1, #C4362B → 3.4:1). Green falls back to
    ypi-green-300, which the DS readme already reserves for dark-mode text;
    the red is a lift of --color-danger to the same lightness band (6.3:1).
  */
  --status-ok: var(--ypi-green-300);
  --status-error: #E8776B;
}