:root {
  color-scheme: light;
  --page: #f5f3fa;
  --surface: #fdfcfe;
  --subtle: #f4f0fa;
  --ink: #211a32;
  --muted: #594f6b;
  --placeholder: #685b7b;
  --border: #ded6eb;
  --field: #8e819f;
  --track: #e2d8f4;
  --accent: #5938a8;
  --accent-soft: #eee7fb;
  --primary: #6540be;
  --primary-hover: #5532a7;
  --primary-ink: #fff;
  --focus: #7049ce;
  --green: #225c44;
  --green-soft: #e5f2ea;
  --red: #95374f;
  --red-soft: #fceaf0;
  --danger: #963950;
  --danger-hover: #7d2c42;
  --danger-ink: #fff8fa;
  --shadow-soft: rgb(33 26 50 / 7%);
  --shadow: rgb(33 26 50 / 18%);
  --backdrop: rgb(23 20 31 / 45%);
  --backdrop-strong: rgb(23 20 31 / 65%);
  --art-filter: brightness(.95) saturate(1.04);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
  color: var(--ink);
  background: var(--page);
  font-synthesis: none;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #17141f;
  --surface: #211c2d;
  --subtle: #1a1624;
  --ink: #f4effb;
  --muted: #c6bbd6;
  --placeholder: #ad9fbe;
  --border: #3d344c;
  --field: #78668b;
  --track: #403452;
  --accent: #c4adff;
  --accent-soft: #35274e;
  --primary: #7049ce;
  --primary-hover: #7952d6;
  --focus: #b69cf7;
  --green: #9ae1ba;
  --green-soft: #233b33;
  --red: #ffb2c1;
  --red-soft: #442733;
  --danger: #a2374d;
  --danger-hover: #ad4057;
  --danger-ink: #fff8fa;
  --shadow-soft: rgb(10 8 16 / 23%);
  --shadow: rgb(10 8 16 / 42%);
  --backdrop: rgb(10 8 16 / 58%);
  --backdrop-strong: rgb(10 8 16 / 77%);
  --art-filter: brightness(1.09) saturate(.96);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 280px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
svg { display: block; flex: none; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { color: var(--primary-ink); background: var(--primary); }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
input[type="radio"], input[type="checkbox"], progress { accent-color: var(--primary); }