/* Design tokens: light, dark (system) and manual theme override */
:root {
  --bg: #f3f3fa;
  --panel: #fff;
  --panel2: #f7f7fd;
  --ink: #12132a;
  --mute: #6a6d86;
  --line: #e4e5f1;
  --accent: #4f46e5;
  --accent2: #7c5cff;
  --accent-ink: #fff;
  --ok: #12805c;
  --bad: #c7283b;
  --warn: #a15c07;
  --stage: #eceef8;
  --shadow: 0 1px 2px rgba(18, 19, 42, 0.06), 0 10px 30px rgba(18, 19, 42, 0.07);
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #080912;
    --panel: #10111d;
    --panel2: #171829;
    --ink: #eceefc;
    --mute: #9a9db8;
    --line: #242641;
    --accent: #8c86ff;
    --accent2: #b18cff;
    --accent-ink: #0b0a1f;
    --ok: #4fd1a1;
    --bad: #ff8b9b;
    --warn: #f0b25a;
    --stage: #0b0c17;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  --bg: #080912;
  --panel: #10111d;
  --panel2: #171829;
  --ink: #eceefc;
  --mute: #9a9db8;
  --line: #242641;
  --accent: #8c86ff;
  --accent2: #b18cff;
  --accent-ink: #0b0a1f;
  --ok: #4fd1a1;
  --bad: #ff8b9b;
  --warn: #f0b25a;
  --stage: #0b0c17;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.35);
}