:root {
  color-scheme: light;
  --canvas: #eef4f4;
  --surface: #ffffff;
  --ink: #153743;
  --muted: #506670;
  --line: #dce5e4;
  --subtle: #e7efed;
  --raised: #f8fbfa;
  --chrome: #f7f9f7;
  --overlay: #102b3b55;
  --shadow: #15374316;
  --focus-ring: #a86a12;
  --accent: #214d5d;
  --action: #214d5d;
  --action-ink: #f6fafb;
  --link: #214d5d;
  --cash-surface: #214d5d;
  --cash-ink: #f6faf9;
  --sky-surface: #deedf3;
  --sky-ink: #416b7b;
  --peach-surface: #f7bd98;
  --peach-ink: #71462f;
  --sage-surface: #e7efea;
  --sage-ink: #456a58;
  --lilac-surface: #eeeaf4;
  --lilac-ink: #756084;
  --danger: #963b3c;
  --danger-surface: #faf0ee;
  --danger-line: #e5c6c0;
  --blue: #bddde9;
  --peach: var(--peach-surface);
  --teal: #5d8479;
  --amber: #a36c28;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #101c22;
  --surface: #192a32;
  --ink: #e6efed;
  --muted: #a3b7bc;
  --line: #30464e;
  --subtle: #243941;
  --raised: #20333b;
  --chrome: #142329;
  --overlay: #050f18b3;
  --shadow: #02090d66;
  --focus-ring: #edbb71;
  --accent: #2b5665;
  --action: #bddde9;
  --action-ink: #153743;
  --link: #bddde9;
  --cash-surface: #214957;
  --cash-ink: #f0f7f6;
  --sky-surface: #263f4c;
  --sky-ink: #b9dae6;
  --peach-surface: #4a352d;
  --peach-ink: #f4c5a8;
  --sage-surface: #283e37;
  --sage-ink: #bad6c9;
  --lilac-surface: #383346;
  --lilac-ink: #d6c3e8;
  --danger: #f1adaa;
  --danger-surface: #432f32;
  --danger-line: #75474a;
  --blue: #82b5c9;
  --teal: #8ab5a6;
  --amber: #dfb271;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--raised);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle .theme-sun,
[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
.theme-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.theme-toggle:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover { background: var(--subtle); border-color: var(--muted); }
}

/* Only a pointer-initiated theme change gets the brief colour transition. */
html.theme-transition body,
html.theme-transition button,
html.theme-transition input,
html.theme-transition select,
html.theme-transition textarea,
html.theme-transition dialog,
html.theme-transition aside,
html.theme-transition article,
html.theme-transition header,
html.theme-transition nav,
html.theme-transition .surface,
html.theme-transition .sheet {
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-transition * { transition: none !important; }
}