/* Theme tokens (adapted from Poklych "Soft Silence"). Light by default; dark by OS preference or data-theme.
   Components take colours only from here. "-soft" tints are backgrounds for state panels. */
:root {
  color-scheme: light;
  --bg: #eef3f8; --surface: #ffffff; --soft: #e6edf4; --fg: #1b2025; --muted: #55616d; --line: #d5dce3;
  --accent: #0f766e; --tg: #1f72bd; --tg-fg: #ffffff; --tg-soft: #dcecfb; --link: #16609f;
  --ok: #0f766e; --ok-soft: #e1f1ef; --warn: #8a5a00; --warn-soft: #f6eddb; --bad: #b3322a; --bad-soft: #f8e4e1;
  --tape-yellow: #f5c400; --tape-black: #1f1f1f;
  --shadow: 0 1px 2px rgb(20 40 70 / 6%), 0 12px 32px rgb(20 40 70 / 8%);
  --shadow-sm: 0 1px 2px rgb(20 40 70 / 7%);
  --radius-card: 22px; --radius-box: 16px; --radius-field: 12px; --radius-pill: 999px;
  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --page: 560px; --page-wide: 780px; --page-app: 1060px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0c1218; --surface: #161a1d; --soft: #0f1519; --fg: #e5e9ec; --muted: #9aa5af; --line: #2a3137;
    --accent: #2dd4bf; --tg-soft: #1f3a55; --link: #7cbcf5;
    --ok: #2dd4bf; --ok-soft: #12302c; --warn: #e6b450; --warn-soft: #342a14; --bad: #f07167; --bad-soft: #3a1c1a;
    --tape-yellow: #d9ad00; --tape-black: #111111;
    --shadow: 0 0 0 1px var(--line); --shadow-sm: 0 0 0 1px var(--line);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c1218; --surface: #161a1d; --soft: #0f1519; --fg: #e5e9ec; --muted: #9aa5af; --line: #2a3137;
  --accent: #2dd4bf; --tg-soft: #1f3a55; --link: #7cbcf5;
  --ok: #2dd4bf; --ok-soft: #12302c; --warn: #e6b450; --warn-soft: #342a14; --bad: #f07167; --bad-soft: #3a1c1a;
  --tape-yellow: #d9ad00; --tape-black: #111111;
  --shadow: 0 0 0 1px var(--line); --shadow-sm: 0 0 0 1px var(--line);
}