:root {
  font-family: Manrope, system-ui, sans-serif;
  color: #30263d;
  background: #f4efdf;
  font-synthesis: none;
  color-scheme: light;
  --on-primary: #fffdf7;
  --on-success: #fffdf7;
  --danger: #a12d46;
  --warning: #805a12;
  --radius-panel: 6px;
  --radius-control: 4px;
  --ink: #30263d;
  --blocker: #171b1a;
  --blocker-mark: #f4efdf;
  --paper: #f4efdf;
  --surface: #fffdf7;
  --line: #c9bcd1;
  --muted: #716579;
  --blue: #68428c;
  --blue-dark: #4f2e6f;
  --green: #47705c;
  --account-stat-surface: #e9e0f4;
  --shadow-panel: 3px 4px 0 color-mix(in srgb, var(--ink) 18%, transparent);
  --shadow-card: 2px 3px 0 color-mix(in srgb, var(--ink) 16%, transparent);
  --shadow-board: inset 0 2px 5px rgba(28, 49, 44, .12), 0 16px 34px rgba(28, 49, 44, .12);
  --shadow-cell: inset 0 1px 0 rgba(255, 255, 255, .52);
  --shadow-filled-cell: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -2px 0 rgba(0, 0, 0, .1);
  --shadow-soft: 0 3px 7px rgba(28, 49, 44, .08);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --on-primary: #211a2b;
  --on-success: #211a2b;
  --danger: #ff9bab;
  --warning: #efc86e;
  color: #fff8e9;
  background: #211a2b;
  --ink: #fff8e9;
  --paper: #211a2b;
  --surface: #30263b;
  --line: #685771;
  --muted: #c0b3ca;
  --blue: #c8a9ed;
  --blue-dark: #b48cdd;
  --green: #79a88f;
  --account-stat-surface: #40324e;
  --shadow-panel: 3px 4px 0 #120e19;
  --shadow-card: 2px 3px 0 #120e19;
  --shadow-board: inset 0 2px 6px rgba(0, 0, 0, .3), 0 18px 38px rgba(0, 0, 0, .28);
  --shadow-cell: inset 0 1px 0 rgba(255, 255, 255, .045);
  --shadow-filled-cell: inset 0 1px 0 rgba(255, 255, 255, .11), inset 0 -2px 0 rgba(0, 0, 0, .24);
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, .22);
}

/* Standalone pages follow the system theme; the app keeps its explicit preference. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
  color-scheme: dark;
  --on-primary: #211a2b;
  --on-success: #211a2b;
  --danger: #ff9bab;
  --warning: #efc86e;
  color: #fff8e9;
  background: #211a2b;
  --ink: #fff8e9;
  --paper: #211a2b;
  --surface: #30263b;
  --line: #685771;
  --muted: #c0b3ca;
  --blue: #c8a9ed;
  --blue-dark: #b48cdd;
  --green: #79a88f;
  --account-stat-surface: #40324e;
  --shadow-panel: 3px 4px 0 #120e19;
  --shadow-card: 2px 3px 0 #120e19;
  --shadow-board: inset 0 2px 6px rgba(0, 0, 0, .3), 0 18px 38px rgba(0, 0, 0, .28);
  --shadow-cell: inset 0 1px 0 rgba(255, 255, 255, .045);
  --shadow-filled-cell: inset 0 1px 0 rgba(255, 255, 255, .11), inset 0 -2px 0 rgba(0, 0, 0, .24);
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, .22);
}
}