:root {
  color-scheme: light;
  --surface-rail: #ffffff;
  --surface-canvas: #f7f3f1;
  --surface-card: #ffffff;
  --surface-hover: #f2eeec;
  --surface-raised: #ffffff;
  --surface-inset: #eee9e6;
  --border: #e6e2e1;
  --border-strong: #898385;
  --row-border: #e9e4e1;
  --text-primary: #231f23;
  --text-body: #443e41;
  --text-secondary: #625c5f;
  --text-muted: #686265;
  --ink: #231f23;
  --on-ink: #f7f3f1;
  --scrim: #231f2373;
  --success: #287453;
  --success-surface: #e9f7ef;
  --warning: #8a5d18;
  --warning-surface: #fff6df;
  --font-headline: "Stack Sans Headline", Inter, sans-serif;
  --font-ui: Inter, sans-serif;
  --font-machine: "Fragment Mono", monospace;
  --font-button: "Stack Sans Text", Inter, sans-serif;
  --type-label: 10px;
  --type-meta: 11px;
  --type-secondary: 12px;
  --type-control: 13px;
  --type-body: 14px;
  --type-heading-small: 16px;
  --type-heading-medium: 18px;
}

:root[data-mode="dark"] {
  color-scheme: dark;
  --surface-rail: #141114;
  --surface-canvas: #1a171a;
  --surface-card: #231f23;
  --surface-hover: #2c272c;
  --surface-raised: #2a252a;
  --surface-inset: #100e10;
  --border: #383238;
  --border-strong: #787178;
  --row-border: #342e34;
  --text-primary: #f7f3f1;
  --text-body: #d9d2d0;
  --text-secondary: #b7afb0;
  --text-muted: #9d9799;
  --ink: #f7f3f1;
  --on-ink: #231f23;
  --scrim: #0000008c;
  --success: #8dd8b5;
  --success-surface: #193126;
  --warning: #f2c879;
  --warning-surface: #302719;
}