html[data-theme="light"] {
  color-scheme: light;
  --ink: #132033;
  --muted: #667085;
  --line: #dfe5ec;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --surface-soft: #f7f8fa;
  --blue-soft: #eaf2ff;
  --success-soft: #eaf7f1;
  --danger-soft: #fff0ee;
  --warning-soft: #fff7e6;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e7edf5;
  --muted: #9aabba;
  --line: #2a3a4d;
  --surface: #101c2b;
  --surface-2: #091522;
  --surface-soft: #152334;
  --blue-soft: #102b49;
  --success-soft: #102e24;
  --danger-soft: #351a1b;
  --warning-soft: #3a2b12;
}

html[data-theme="light"] .topbar {
  background: rgba(246, 248, 251, .92);
  border-bottom-color: rgba(223, 229, 236, .72);
}

html[data-theme="light"] select,
html[data-theme="light"] input[type="search"],
html[data-theme="light"] .ghost-button,
html[data-theme="light"] .availability-actions button,
html[data-theme="light"] .resource-link,
html[data-theme="light"] .student-row {
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="light"] .schedule-day-head { background: #fbfcfe; }
html[data-theme="light"] .segmented { background: #e9edf2; }
html[data-theme="light"] .segmented button.is-active { background: #ffffff; color: var(--ink); }
html[data-theme="light"] .date-tile { background: var(--surface-2); }
html[data-theme="light"] .conflict-item { background: #fffafa; }
html[data-theme="light"] .event-chip { background: #f8fbff; border-color: #d9e4f1; color: #254665; }
html[data-theme="light"] .bottom-nav { background: rgba(255, 255, 255, .96); }

html[data-theme="dark"] .topbar {
  background: rgba(9, 21, 34, .94);
  border-bottom-color: rgba(42, 58, 77, .9);
}

html[data-theme="dark"] select,
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] .ghost-button,
html[data-theme="dark"] .student-row,
html[data-theme="dark"] .segmented button.is-active {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .ghost-button:hover,
html[data-theme="dark"] .student-row:hover,
html[data-theme="dark"] .student-row.is-active {
  background: var(--surface-soft);
}

.theme-control {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.theme-control select {
  min-width: 104px;
}

@media (max-width: 820px) {
  .theme-control {
    width: 100%;
  }
  .theme-control select {
    width: 100%;
  }
}