:root[data-theme=light] {
  --color-page: #f5f7fb;
  --color-surface: #ffffff;
  --color-surface-subtle: #f2f5fa;
  --color-surface-muted: #e9eef6;
  --color-board: #ffffff;
  --color-text: #17253b;
  --color-text-muted: #59677c;
  --color-accent: #2155c9;
  --color-accent-hover: #163b8f;
  --color-on-accent: #ffffff;
  --color-accent-subtle: #e8efff;
  --color-danger: #ac2245;
  --color-on-danger: #ffffff;
  --color-danger-subtle: #fff0f3;
  --color-border: #7b889b;
  --color-hairline: #d6deea;
  --color-focus: #245ee0;
  --color-success: #287345;
  --color-warning: #92570d;
  --color-toast: #17253b;
  --color-on-toast: #ffffff;
  --color-open: #e4f2ea;
  --color-on-open: #185431;
  --ink-rgb:
    23,
    37,
    59;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-display: var(--font-body);
  --font-extended: var(--font-body);
  --font-note: var(--font-body);
  --weight-display: 650;
  --tracking-display: -.035em;
  --type-note: 16px;
  --board-texture: none;
  --board-sheen: none;
  --button-shading: none;
  --shadow-highlight: none;
  --note-rotation: 0deg;
  --note-paper-shading: none;
}
:root[data-theme=slate] {
  --color-page: #111923;
  --color-surface: #1c2837;
  --color-surface-subtle: #223143;
  --color-surface-muted: #2b3c50;
  --color-board: #16212e;
  --color-text: #edf2f8;
  --color-text-muted: #b0bed0;
  --color-accent: #a9c6ff;
  --color-accent-hover: #c9daff;
  --color-on-accent: #13274a;
  --color-accent-subtle: #263b59;
  --color-danger: #ffacbd;
  --color-on-danger: #491025;
  --color-danger-subtle: #442638;
  --color-border: #7e90a8;
  --color-hairline: #394b62;
  --color-focus: #bdd3ff;
  --color-success: #9ed19d;
  --color-warning: #efbe7c;
  --color-toast: #e0eafb;
  --color-on-toast: #17253b;
  --color-open: #254633;
  --color-on-open: #c4edce;
  --color-overlay: rgba(0,0,0,.6);
  --surface-rgb:
    28,
    40,
    55;
  --ink-rgb:
    237,
    242,
    248;
  --color-rule: rgba(237,242,248,.15);
  --color-rule-strong: rgba(237,242,248,.24);
  --color-rule-subtle: rgba(237,242,248,.1);
  --color-state-hover: rgba(237,242,248,.08);
  --color-column: rgba(28,40,55,.4);
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-display: "IBM Plex Mono", ui-monospace, monospace;
  --font-extended: var(--font-display);
  --font-note: var(--font-body);
  --font-meta: var(--font-display);
  --weight-display: 500;
  --weight-heading: 500;
  --tracking-display: -.04em;
  --tracking-heading: -.025em;
  --type-note: 16px;
  --shadow-control: 0 1px 2px rgba(0,0,0,.18);
  --shadow-control-pressed: inset 0 1px 3px rgba(0,0,0,.3);
  --shadow-input: inset 0 1px 3px rgba(0,0,0,.2);
  --shadow-panel: 0 2px 8px rgba(0,0,0,.12);
  --shadow-hover: 0 3px 12px rgba(0,0,0,.22);
  --shadow-overlay: 0 10px 32px rgba(0,0,0,.4);
  --shadow-highlight: inset 0 1px rgba(255,255,255,.04);
  --shadow-primary: 0 2px 2px rgba(0,0,0,.2);
  --shadow-focus: 0 0 0 2px rgba(189,211,255,.15);
  --board-sheen: none;
  color-scheme: dark;
}
:root[data-theme=forest] {
  --font-body: "Nunito Sans", system-ui, sans-serif;
  --font-display: "Bitter", Georgia, serif;
  --font-extended: var(--font-display);
  --font-note: var(--font-display);
  --weight-display: 550;
  --weight-heading: 600;
  --tracking-display: -.02em;
  --tracking-heading: -.015em;
  --color-page: #eef2eb;
  --color-surface: #fcfdf9;
  --color-surface-subtle: #e8eee3;
  --color-surface-muted: #dfe7d9;
  --color-board: #f7faf3;
  --color-text: #20372c;
  --color-text-muted: #526657;
  --color-accent: #2d6048;
  --color-accent-hover: #1d4231;
  --color-on-accent: #ffffff;
  --color-accent-subtle: #e0eddd;
  --color-danger: #9c3041;
  --color-on-danger: #ffffff;
  --color-danger-subtle: #fae9e9;
  --color-border: #738471;
  --color-hairline: #d2ddcc;
  --color-focus: #28694e;
  --color-success: #35664b;
  --color-warning: #8a581c;
  --color-toast: #20372c;
  --color-on-toast: #ffffff;
  --color-open: #dcebd7;
  --color-on-open: #244c32;
  --surface-rgb: 252, 253, 249;
  --ink-rgb: 32, 55, 44;
  --board-sheen: none;
  --shadow-focus: 0 0 0 2px rgba(45,96,72,0.14);
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
  }
}