/* A quieter, accessible palette layered over the existing page layouts. */
:root {
  color-scheme: light;
  --ink: #192638;
  --muted: #5d6a79;
  --cream: #f5f7fa;
  --card: #ffffff;
  --green: #315f98;
  --green-dark: #234a78;
  --green-soft: #eaf0f8;
  --line: #dce4ec;
  --red: #b74853;
  --shadow: 0 20px 60px rgba(27, 43, 63, .07);
}

.site-header { background: rgba(245, 247, 250, .96); border-bottom-color: var(--line); }
.brand-mark { background: var(--green); }
.button-primary, .nav-cta { background: var(--green); color: #fff; }
.button-primary:hover, .nav-cta:hover { background: var(--green-dark); }
.button-secondary { background: var(--card); border-color: var(--line); color: var(--ink); }
.button-secondary:hover { background: var(--green-soft); }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}
.theme-toggle:hover { background: var(--green-soft); }
.theme-toggle[hidden] { display: none; }
.theme-toggle-icon { font-size: 1rem; line-height: 1; }
.theme-toggle:focus-visible, a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #6da8f2;
  outline-offset: 2px;
}
.preview-top, .feature-band, .stat-done { background: #eaf0f8; }
.progress-track { background: #e4eaf1; }
.progress-track span { background: #6d95c7; }
.check-circle, .preview-pill, .member-avatar, .auth-doodle span { background: var(--green-soft); color: var(--green); }
.check-circle.empty { background: var(--card); border-color: #bfccd9; }
.preview-row, .member-row, .chore-row { border-bottom-color: var(--line); }
.preview-top small, .preview-row small, .preview-note,
.feature-band p, .story-copy > p { color: var(--muted); }
.feature-number { color: var(--green); }
.stack-form label, .rotation-form-label { color: var(--ink); }
.stack-form input, .stack-form select, .stack-form textarea,
.add-member-form input, .filters select, .member-invite-form input,
.rename-member-form input, .rotation-complete-form select,
.rotation-results-editor textarea, .invite-callout input {
  border-color: var(--line);
  background: var(--card);
  color: var(--ink);
}
.stack-form input:focus, .stack-form select:focus, .stack-form textarea:focus,
.add-member-form input:focus, .filters select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.stat-card, .hero-preview { background: var(--card); border-color: var(--line); }
.stat-card small, .site-footer { color: var(--muted); }
.filters, .rename-member-form { background: #f0f4f8; }
.filters label { color: var(--muted); }
.chore-main > p { color: var(--muted); }
.chore-meta span { background: #eef2f6; color: #526476; }
.chore-meta .priority-high { background: #fff0e7; color: #935325; }
.chore-meta .priority-low { background: #e8f1fb; color: #315f98; }
.rotation-card { background: #fafcff; }
.rotation-status { background: #e7effa; color: #315f98; }
.rotation-status.rotation-paused { background: #f2eee6; color: #736344; }
.invite-callout { background: #eaf0f8; border-color: #ccdaea; }
.invite-callout p { color: var(--muted); }
.hero-photo-note { background: rgba(255,255,255,.96); color: var(--green-dark); }
.landing-page .feature-band { background: #eaf0f8; }
.landing-page .feature-band > div:not(.feature-intro) { background: var(--card); border-color: var(--line); }
.landing-page .feature-number { background: #dbe7f6; color: var(--green); }
.story-photo-wrap::after { background: #dce7f4; }

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eef3fa;
  --muted: #afbdce;
  --cream: #111923;
  --card: #1c2837;
  --green: #8fbdff;
  --green-dark: #a7cbff;
  --green-soft: #233a56;
  --line: #35465a;
  --red: #ff9ca2;
  --shadow: 0 20px 60px rgba(0, 0, 0, .23);
}
html[data-theme="dark"] .site-header { background: rgba(17, 25, 35, .97); }
html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .button-primary,
html[data-theme="dark"] .nav-cta { background: #3d72b2; color: #fff; }
html[data-theme="dark"] .button-primary:hover,
html[data-theme="dark"] .nav-cta:hover { background: #4f86c9; }
html[data-theme="dark"] .button-secondary,
html[data-theme="dark"] .theme-toggle { background: #243348; color: var(--ink); }
html[data-theme="dark"] .button-secondary:hover,
html[data-theme="dark"] .theme-toggle:hover { background: #2e4260; }
html[data-theme="dark"] .hero-preview,
html[data-theme="dark"] .stat-card { background: var(--card); }
html[data-theme="dark"] .preview-top,
html[data-theme="dark"] .stat-done { background: #243a51; }
html[data-theme="dark"] .preview-top small,
html[data-theme="dark"] .preview-row small,
html[data-theme="dark"] .preview-note,
html[data-theme="dark"] .feature-band p,
html[data-theme="dark"] .story-copy > p { color: var(--muted); }
html[data-theme="dark"] .preview-row.checked strong,
html[data-theme="dark"] .is-done .chore-main h3 { color: #a5b4c3; }
html[data-theme="dark"] .progress-track { background: #3a4a5d; }
html[data-theme="dark"] .progress-track span { background: #6e9bce; }
html[data-theme="dark"] .check-circle,
html[data-theme="dark"] .preview-pill,
html[data-theme="dark"] .member-avatar,
html[data-theme="dark"] .auth-doodle span { background: #294363; color: #b7d7ff; }
html[data-theme="dark"] .check-circle.empty { background: #243348; border-color: #63768a; }
html[data-theme="dark"] .preview-arrow { color: #a1b1c2; }
html[data-theme="dark"] .feature-band,
html[data-theme="dark"] .landing-page .feature-band { background: #172231; }
html[data-theme="dark"] .landing-page .feature-band > div:not(.feature-intro) { background: #213044; }
html[data-theme="dark"] .landing-page .feature-number { background: #2b4361; color: #b7d7ff; }
html[data-theme="dark"] .story-photo-wrap::after { background: #2a3c50; }
html[data-theme="dark"] .hero-photo-note { background: rgba(28,40,55,.96); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .stack-form input,
html[data-theme="dark"] .stack-form select,
html[data-theme="dark"] .stack-form textarea,
html[data-theme="dark"] .add-member-form input,
html[data-theme="dark"] .filters select,
html[data-theme="dark"] .member-invite-form input,
html[data-theme="dark"] .rename-member-form input,
html[data-theme="dark"] .rotation-complete-form select,
html[data-theme="dark"] .rotation-results-editor textarea,
html[data-theme="dark"] .invite-callout input { background: #152130; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #9cacc0; }
html[data-theme="dark"] .filters,
html[data-theme="dark"] .rename-member-form { background: #223247; }
html[data-theme="dark"] .filters label,
html[data-theme="dark"] .chore-main > p { color: var(--muted); }
html[data-theme="dark"] .chore-meta span { background: #2a3d53; color: #c2d0df; }
html[data-theme="dark"] .chore-meta .priority-high { background: #50362d; color: #ffd1a7; }
html[data-theme="dark"] .chore-meta .priority-low { background: #243b59; color: #bdd7ff; }
html[data-theme="dark"] .complete-button { background: #1b2939; border-color: #708298; }
html[data-theme="dark"] .is-done .complete-button { background: #3d72b2; border-color: #3d72b2; }
html[data-theme="dark"] .rotation-card { background: #202e40; }
html[data-theme="dark"] .rotation-status { background: #26466b; color: #c7e0ff; }
html[data-theme="dark"] .rotation-status.rotation-paused { background: #493f32; color: #e8d5aa; }
html[data-theme="dark"] .invite-callout { background: #223b56; border-color: #47627d; }
html[data-theme="dark"] .invite-callout strong { color: #c4ddff; }
html[data-theme="dark"] .flash-success { background: #193e39; color: #c3eee0; }
html[data-theme="dark"] .flash-error { background: #4a2a30; color: #ffd0d1; }

@media (max-width: 650px) {
  .header-inner { flex-wrap: wrap; }
  .header-inner nav { width: 100%; justify-content: flex-end; }
  .theme-toggle-label { display: none; }
  .theme-toggle { width: 36px; padding: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .button { transition: none; }
}