/* Design tokens (light/dark). Names are stable: www, play and the panel all read them.
   Contrast: ink/bg ≥ 15:1, muted/bg ≥ 4.9:1, brand/bg ≥ 5:1, on-brand/brand ≥ 5:1 (WCAG AA). */
:root {
  --ax-bg: #fafaf9;
  --ax-surface: #ffffff;
  --ax-paper: #f3f3f1;
  --ax-ink: #18181b;
  --ax-muted: #5f5f66;
  --ax-border: #e4e4e0;
  --ax-brand: #3d5afe;
  --ax-brand-soft: #eef1ff;
  --ax-on-brand: #ffffff;
  --ax-accent: #ff6d3a;
  --ax-danger: #c62828;
  --ax-danger-soft: #fdeeee;
  --ax-ok: #1b7f4b;
  --ax-radius: 10px;
  --ax-space: 16px;
  --ax-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --ax-tap: 44px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ax-bg: #0f0f10; --ax-surface: #18181b; --ax-paper: #1f1f23; --ax-ink: #ececee;
    --ax-muted: #a1a1aa; --ax-border: #2c2c31; --ax-brand: #8c9eff; --ax-brand-soft: #1d2140;
    --ax-on-brand: #0f0f10; --ax-accent: #ff9e7a; --ax-danger: #f19999;
    --ax-danger-soft: #3a1c1c; --ax-ok: #7fd3a3;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ax-bg: #0f0f10; --ax-surface: #18181b; --ax-paper: #1f1f23; --ax-ink: #ececee;
  --ax-muted: #a1a1aa; --ax-border: #2c2c31; --ax-brand: #8c9eff; --ax-brand-soft: #1d2140;
  --ax-on-brand: #0f0f10; --ax-accent: #ff9e7a; --ax-danger: #f19999;
  --ax-danger-soft: #3a1c1c; --ax-ok: #7fd3a3;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--ax-bg); color: var(--ax-ink);
  font: 16px/1.5 var(--ax-font);
}
main { max-width: 720px; margin: 0 auto; padding: calc(var(--ax-space) * 2) var(--ax-space); }
a { color: var(--ax-brand); }
button, .ax-button, input[type="submit"] {
  min-height: var(--ax-tap); padding: 0 var(--ax-space); border: 0; border-radius: var(--ax-radius);
  background: var(--ax-brand); color: var(--ax-on-brand); font: inherit; cursor: pointer;
}
input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
  min-height: var(--ax-tap); width: 100%; padding: 0 12px; font: inherit; color: var(--ax-ink);
  background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: var(--ax-radius);
}
.ax-muted { color: var(--ax-muted); }
:focus-visible { outline: 2px solid var(--ax-brand); outline-offset: 2px; }