/* Semantic surfaces keep both themes readable without recoloring the logo. */
:root {
  color-scheme: light;
  --surface: #f7f8fa;
  --panel: #ffffff;
  --text: #25334c;
  --heading: #1e3876;
  --link: #2853b9;
  --muted: #606b7e;
  --border: #e2e6ec;
  --field-border: #8995a6;
  --soft: #eef2f7;
  --selected: #e7effb;
  --hover: #f1f5fa;
  --accent-surface: #edf4fc;
  --accent-text: #264d7b;
  --button-bg: #1e3876;
  --button-hover: #2853b9;
  --button-text: #ffffff;
  --success-bg: #e9f5ef;
  --success-text: #236144;
  --success-border: #abd3bf;
  --warning-bg: #fff4db;
  --warning-text: #7c560b;
  --error-bg: #fff1f3;
  --error-text: #8b2837;
  --error-border: #e8bac2;
  --shadow: 0 18px 55px rgb(30 56 118 / 7%);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #111821;
  --panel: #1a2431;
  --text: #e0e7f0;
  --heading: #edf3fc;
  --link: #9cc9ff;
  --muted: #abb9cb;
  --border: #354356;
  --field-border: #64748b;
  --soft: #222f40;
  --selected: #283f5e;
  --hover: #233246;
  --accent-surface: #203248;
  --accent-text: #c5dffa;
  --button-bg: #9cc9ff;
  --button-hover: #bfddff;
  --button-text: #14253e;
  --success-bg: #1d3a31;
  --success-text: #a4dfbe;
  --success-border: #3f705c;
  --warning-bg: #3e321b;
  --warning-text: #f3d492;
  --error-bg: #412a32;
  --error-text: #ffc1cb;
  --error-border: #815365;
  --shadow: 0 18px 55px rgb(0 0 0 / 16%);
}

body, .landing-page { background: var(--surface); color: var(--text); }
:focus-visible { outline-color: var(--link); }
.card, .topbar, .sidebar, .auth-page, .landing-card, .skip-link:focus {
  background: var(--panel);
  color: var(--text);
}
.landing-card { box-shadow: var(--shadow); }
.sidebar { border-right: 1px solid var(--border); }
h1, h2, h3, .stat strong, .sidebar-brand, .auth-story h1, .welcome-banner h2 { color: var(--heading); }
a, .eyebrow, .step-label { color: var(--link); }
.nav-label, .sidebar-bottom, .auth-footnote, .auth-story .lead { color: var(--muted); }
.nav-link { color: var(--text); }
.nav-link:hover, .nav-link.is-active { color: var(--heading); background: var(--selected); }
.auth-story { color: var(--text); background: var(--soft); }
.auth-story .eyebrow, .welcome-banner .eyebrow { color: var(--link); }
.welcome-banner { color: var(--text); background: var(--accent-surface); }
.button { color: var(--button-text); background: var(--button-bg); }
.button:hover { background: var(--button-hover); }
.button-quiet, .button-white { color: var(--link); background: var(--panel); border-color: var(--border); }
.button-quiet:hover, .button-white:hover { background: var(--hover); }
input:not([type="submit"]):not([type="hidden"]), select, textarea {
  background: var(--panel);
  color: var(--text);
  border-color: var(--field-border);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.dev-note { color: var(--accent-text); background: var(--accent-surface); }
.avatar, .tile-icon { color: var(--link); background: var(--selected); }
.badge, .badge-inactive, .badge-ended { color: var(--text); background: var(--soft); }
.badge-active { color: var(--success-text); background: var(--success-bg); }
.badge-pending { color: var(--warning-text); background: var(--warning-bg); }
.flash { color: var(--success-text); background: var(--success-bg); border-color: var(--success-border); }
.flash-alert { color: var(--error-text); background: var(--error-bg); border-color: var(--error-border); }
th { background: var(--soft); }
tbody tr:hover { background: var(--hover); }
.roadmap { background: transparent; }
.status-badge { color: var(--link); background: var(--panel); }
/* The supplied dark-letter logo needs a light plate in either theme. */
.landing-card > .brand-logo { background: #fff; padding: .65rem; border-radius: .4rem; }
.theme-switch {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: .25rem;
  margin: 0;
  padding: .25rem;
  border: 1px solid var(--border);
  border-radius: .6rem;
  background: var(--surface);
}
.theme-option {
  min-height: 44px;
  padding: .5rem .85rem;
  border: 1px solid transparent;
  border-radius: .4rem;
  background: transparent;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 650;
}
.theme-option:hover { color: var(--heading); background: var(--hover); }
.theme-option[aria-pressed="true"] { color: var(--button-text); background: var(--button-bg); }
.auth-form .theme-switch { margin: 0 0 1.5rem; }
.landing-card .theme-switch { display: flex; width: fit-content; margin-bottom: 1.5rem; }
@media (max-width: 760px) {
  .sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
}