:root {
  color-scheme: light;
  --paper: #F1F6F4;
  --paper-raised: #F8FBFA;
  --ink: #173638;
  --ink-muted: #577173;
  --rule: #A9C0BE;
  --reserve-teal: #0B9084;
  --anchor-amber: #D18A1B;
  --buy-green: #1C874D;
  --sell-red: #C64C43;
  --focus: #173638;
  --sheet: #F8FBFA;
  --gate: #D18A1B;
  --font: ui-rounded, "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #102527;
    --paper-raised: #173638;
    --ink: #D9ECE8;
    --ink-muted: #A5C2BF;
    --rule: #4B6C6C;
    --reserve-teal: #39B9AC;
    --anchor-amber: #E2A443;
    --buy-green: #51B876;
    --sell-red: #E27066;
    --focus: #D9ECE8;
    --sheet: #173638;
    --gate: #E2A443;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #102527;
  --paper-raised: #173638;
  --ink: #D9ECE8;
  --ink-muted: #A5C2BF;
  --rule: #4B6C6C;
  --reserve-teal: #39B9AC;
  --anchor-amber: #E2A443;
  --buy-green: #51B876;
  --sell-red: #E27066;
  --focus: #D9ECE8;
  --sheet: #173638;
  --gate: #E2A443;
}

:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: var(--font); }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); }
button, input { font: inherit; }
button, [data-numeric], .metric-value, .basket, .status-line { font-variant-numeric: tabular-nums; }