/* Shared tokens: warm ivory / charcoal surfaces, clay accent, serif headings.
   Series colors are validated (dataviz validator) against these exact surfaces. */
:root {
  color-scheme: light;
  --page: #f5f4ee;
  --surface: #fbfaf6;
  --surface-2: #efede5;
  --ink: #1f1e1d;
  --ink-2: #5e5d59;
  --muted: #8a8880;
  --grid: #e8e6dc;
  --baseline: #d1cfc5;
  --border: rgba(31, 30, 29, 0.10);
  --accent: #c96442;
  --accent-ink: #ffffff;
  --series-health: #c96442;
  --series-stress: #4a84c4;
  --series-sleep: #5f8f3a;
  --band: rgba(95, 143, 58, 0.10);
  --state: #ebe9e1;
  --state-visited: #e6cfc2;
  --critical: #d03b3b;
  --shadow: 0 1px 2px rgba(31, 30, 29, 0.04);
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #1f1e1d;
    --surface: #262624;
    --surface-2: #30302e;
    --ink: #f0eee6;
    --ink-2: #c2c0b6;
    --muted: #8a8880;
    --grid: #34332f;
    --baseline: #45443f;
    --border: rgba(255, 255, 255, 0.10);
    --accent: #d36d4b;
    --series-health: #d36d4b;
    --series-stress: #5a92d2;
    --series-sleep: #72a047;
    --band: rgba(114, 160, 71, 0.12);
    --state: #30302e;
    --state-visited: #5a3b2f;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #1f1e1d;
  --surface: #262624;
  --surface-2: #30302e;
  --ink: #f0eee6;
  --ink-2: #c2c0b6;
  --muted: #8a8880;
  --grid: #34332f;
  --baseline: #45443f;
  --border: rgba(255, 255, 255, 0.10);
  --accent: #d36d4b;
  --series-health: #d36d4b;
  --series-stress: #5a92d2;
  --series-sleep: #72a047;
  --band: rgba(114, 160, 71, 0.12);
  --state: #30302e;
  --state-visited: #5a3b2f;
  --shadow: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--ink); }
body { font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.muted { color: var(--ink-2); }
.center { min-height: 100vh; display: grid; place-items: center; padding: 16px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

button, .button {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: 8px;
  padding: 9px 14px; border: 1px solid var(--border); background: transparent; color: var(--ink);
}
button.primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
input, select {
  font: inherit; color: inherit; background: var(--surface); width: 100%;
  border: 1px solid var(--baseline); border-radius: 8px; padding: 10px 12px;
}
label { display: block; font-weight: 600; margin: 0 0 6px; }
.error { color: var(--critical); margin: 0 0 14px; }

.login { width: 100%; max-width: 380px; padding: 32px 28px; }
.login h1 { font-size: 1.75rem; margin: 0 0 4px; }
.login p { margin: 0 0 22px; }
.login button { width: 100%; margin-top: 16px; padding: 11px; }