:root {
  color-scheme: light;
  --bg: #f6f7fb;
  --surface: #ffffff;
  --ink: #192237;
  --muted: #526079;
  --line: #cbd3e0;
  --accent: #284fc3;
  --on-accent: #ffffff;
  --soft: #eaf0ff;
  --focus: #995b00;
  --error-bg: #ffebe7;
  --error-ink: #84251c;
  --success-bg: #e1f3e9;
  --success-ink: #20563d;
  --pending-bg: #fff0c2;
  --pending-ink: #644a0f;
  --radius: 12px;
  --shell: 1200px;
  --space: clamp(1rem, 3vw, 2rem);
  --text: var(--ink);
  --ink-deep: var(--ink);
  --panel: var(--surface);
  --paper: var(--bg);
  --border: var(--line);
  --green: var(--accent);
  --green-surface: var(--soft);
  --on-green: var(--ink);
  --shadow: 0 8px 28px rgb(15 25 45 / 8%);
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  line-height: 1.6;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101622;
  --surface: #1b2435;
  --ink: #edf2ff;
  --muted: #b7c3d9;
  --line: #4b5a73;
  --accent: #acc2ff;
  --on-accent: #11244e;
  --soft: #2b3b59;
  --focus: #ffd180;
  --error-bg: #4c2727;
  --error-ink: #ffd2c8;
  --success-bg: #163b2c;
  --success-ink: #bbebce;
  --pending-bg: #40351b;
  --pending-ink: #f4dc95;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bg: #101622;
    --surface: #1b2435;
    --ink: #edf2ff;
    --muted: #b7c3d9;
    --line: #4b5a73;
    --accent: #acc2ff;
    --on-accent: #11244e;
    --soft: #2b3b59;
    --focus: #ffd180;
    --error-bg: #4c2727;
    --error-ink: #ffd2c8;
    --success-bg: #163b2c;
    --success-ink: #bbebce;
    --pending-bg: #40351b;
    --pending-ink: #f4dc95;
  }
}