:root {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e8eef6;
  --muted: #a9b8c9;
  --line: #39495d;
  --surface: #111a27;
  --band: #182435;
  --accent: #69b9ee;
  --accent-dark: #8dcef7;
  --bg: #0b1220;
  --card: #111a27;
  --text: #e8eef6;
  --subtle: #a9b8c9;
  --border: #39495d;
  --border-strong: #53667c;
  --heading: #f4f8fc;
  --surface-soft: #172435;
  --shadow-soft: 0 12px 28px rgb(0 0 0 / 24%);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: #0b1220 !important;
  color: #e8eef6 !important;
}

html[data-theme="dark"] :is(
  .wrap, .page-shell, .card, .panel, .section-box, .selector-panel,
  .finder-card, .trust-badge, .course-card, .session-card, .meta-card,
  .class-card, .review-snippet, .google-review-card, .request-option-card,
  .ci-card, dialog, table, thead, tbody, tr, td, th
) {
  background: #111a27 !important;
  color: #e8eef6 !important;
  border-color: #39495d !important;
}

html[data-theme="dark"] :is(header, footer, nav, .site-brand-bar, .selector-brand-bar, .band, .hero) {
  border-color: #39495d !important;
}

html[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6, strong, label, summary, legend) {
  color: #f5f8fc !important;
}

html[data-theme="dark"] :is(p, li, small, .muted, .subhead, .section-copy, .meta, .finder-card-copy) {
  color: #b9c6d5 !important;
}

html[data-theme="dark"] a:not(.button):not(.btn) {
  color: #83cbfa !important;
}

html[data-theme="dark"] :is(input, select, textarea, button:not(.site-theme-toggle)) {
  background: #172334 !important;
  color: #eef5fc !important;
  border-color: #53657a !important;
}

/* Legacy pages use light gradients and hard-coded white cards rather than the
   shared variables. Keep this layer explicit so dark mode has real hierarchy. */
html[data-theme="dark"] body :is(
  .home-authority, .affiliation-cluster, .home-help-panel, .home-course-chooser,
  .finder-card, .top-trust, .home-status, .home-locality, .course-hero,
  .slug-hero, .slug-guidance-banner, .slug-training-options
) {
  background: #111c2a !important;
  color: #e8eef6 !important;
  border-color: #3e5065 !important;
  box-shadow: 0 12px 28px rgb(0 0 0 / 22%) !important;
}

html[data-theme="dark"] body :is(
  .affiliation-item, .home-course-tile, .home-course-choice-group,
  .home-exact-wording, .google-review-card, .review-snippet,
  .home-locality-links a, .home-stat, .jump-chip, .slug-pill,
  .slug-day-card, .training-option-card
) {
  background: #19283a !important;
  color: #edf4fb !important;
  border-color: #4a6077 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body :is(
  .home-course-tile, .affiliation-item, .home-locality-links a,
  .google-review-card, .jump-chip
):hover {
  background: #203249 !important;
  border-color: #78bde9 !important;
}

html[data-theme="dark"] body :is(
  .home-course-tile strong, .home-course-tile span, .affiliation-item span,
  .affiliation-item strong, .home-help-panel h3, .home-help-panel p,
  .home-locality h2, .home-locality p, .top-trust-copy p,
  .review-snippet p, .google-review-card strong, .google-review-card em,
  .finder-card h3, .finder-card p
) {
  color: #e8eef6 !important;
}

html[data-theme="dark"] body :is(
  .eyebrow, .home-status-label, .affiliation-cluster-heading span,
  .home-authority-heading > span, .review-theme-label
) {
  color: #8fd0f7 !important;
}

html[data-theme="dark"] body :is(.button.secondary, .home-help-actions .button, .home-help-secondary-actions .button) {
  background: #19283a !important;
  color: #dff2ff !important;
  border-color: #58718b !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body :is(.button.secondary, .home-help-actions .button, .home-help-secondary-actions .button):hover {
  background: #243951 !important;
  border-color: #8fd0f7 !important;
}

html[data-theme="dark"] body .top-trust {
  background:
    linear-gradient(90deg, #4285f4 0 24%, #34a853 24% 50%, #fbbc05 50% 74%, #ea4335 74% 100%) top / 100% 4px no-repeat,
    #111c2a !important;
}

html[data-theme="dark"] body .home-locality {
  background: linear-gradient(135deg, #101b29 0%, #142235 58%, #1d2630 100%) !important;
}

/* Pills and compact status controls appear across the home, hub, class, and
   admin views. Give the whole family a dark base before semantic variants. */
html[data-theme="dark"] body :is(
  .eyebrow, .badge, .cert-badge, .trust-badge, .finder-pill-tag,
  .slug-pill-chip, .group-pill-badge, .course-choice-chip,
  .schedule-cue, .delivery-badge, .status, .pill
) {
  background: #1a2b3e !important;
  color: #e7f1fa !important;
  border-color: #4b637b !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body :is(
  .finder-pill-tag-format, .slug-pill-chip-format, .pill.class, .status.loading
) {
  background: #173550 !important;
  color: #9bd6ff !important;
  border-color: #376b91 !important;
}

html[data-theme="dark"] body :is(
  .finder-pill-tag-popular, .slug-pill-chip-momentum, .pill.offer, .status.good
) {
  background: #183a31 !important;
  color: #9ce1c2 !important;
  border-color: #36745e !important;
}

html[data-theme="dark"] body :is(
  .slug-pill-chip-family, .status.warn
) {
  background: #44371c !important;
  color: #f4d486 !important;
  border-color: #7e6730 !important;
}

html[data-theme="dark"] body :is(.pill.block, .status.bad) {
  background: #482528 !important;
  color: #ffb4b8 !important;
  border-color: #81464b !important;
}

/* Calendar days use a distinct slate scale so they read as controls rather
   than more content cards. Selection stays unmistakably blue. */
html[data-theme="dark"] body .calendar-grid {
  color: #c6d5e3 !important;
}

html[data-theme="dark"] body :is(.weekday, .calendar-pad) {
  color: #8296aa !important;
}

html[data-theme="dark"] body .day-button:not(.is-past) {
  background: #172a3d !important;
  color: #dceaf6 !important;
  border-color: #405b73 !important;
}

html[data-theme="dark"] body .day-button:not(.is-past):hover {
  background: #203a52 !important;
  border-color: #6ea9d0 !important;
}

html[data-theme="dark"] body .day-button:not(.is-past)[aria-pressed="true"] {
  background: #126894 !important;
  color: #ffffff !important;
  border-color: #8bd4ff !important;
  box-shadow: 0 0 0 2px rgb(79 180 236 / 28%) !important;
}

html[data-theme="dark"] body :is(.day-button.is-past, .start-grid button.is-past) {
  background: #0e1824 !important;
  color: #667a8e !important;
  border-color: #26394b !important;
  opacity: .78 !important;
}

html[data-theme="dark"] body .day-timeline {
  background: #0b141e !important;
  border-color: #385169 !important;
}

html[data-theme="dark"] body .day-timeline-segment.is-available { background: #53728e !important; }
html[data-theme="dark"] body .day-timeline-segment.is-seated { background: #55a2d3 !important; }
html[data-theme="dark"] body .day-timeline-segment.is-barnacle { background: #d1ad4b !important; }
html[data-theme="dark"] body .day-timeline-segment.is-anchor { background: #55a875 !important; }
html[data-theme="dark"] body .day-star { color: #81d6a2 !important; }

html[data-theme="dark"] body .start-grid button.is-available {
  background: #172a3d !important;
  color: #dceaf6 !important;
  border-color: #405b73 !important;
}

html[data-theme="dark"] body .start-grid button.is-seated {
  background: #173550 !important;
  color: #a8dcff !important;
  border-color: #3f789d !important;
}

html[data-theme="dark"] body .start-grid button.is-barnacle {
  background: #44371c !important;
  color: #f4d486 !important;
  border-color: #846c31 !important;
}

html[data-theme="dark"] body .start-grid button.is-anchor {
  background: #183a31 !important;
  color: #a4e5c8 !important;
  border-color: #3d7b64 !important;
}

html[data-theme="dark"] body .start-grid button[aria-pressed="true"] {
  background: #126894 !important;
  color: #ffffff !important;
  border-color: #8bd4ff !important;
}

html[data-theme="dark"] body :is(.course, .course.is-seated, .course.is-anchor, .course.is-barnacle, .selected-summary) {
  background: #142335 !important;
  color: #e5eef7 !important;
  border-color: #40566d !important;
}

/* Registration is the destination action. Give it a restrained green "go"
   signal in both themes so it stays distinct from blue selection controls. */
html body :is(
  .register-link, .button.primary, .primary-cta, .course-primary-cta,
  a[data-registration]
) {
  background: linear-gradient(180deg, #198b50 0%, #126b3d 100%) !important;
  color: #ffffff !important;
  border: 1px solid #49b978 !important;
  box-shadow: 0 8px 20px rgb(9 89 48 / 28%) !important;
  text-shadow: 0 1px 1px rgb(0 0 0 / 28%) !important;
}

html body :is(
  .register-link, .button.primary, .primary-cta, .course-primary-cta,
  a[data-registration]
):hover {
  background: linear-gradient(180deg, #249e60 0%, #187d49 100%) !important;
  border-color: #76d59c !important;
  box-shadow: 0 10px 24px rgb(9 89 48 / 36%) !important;
}

html body :is(
  .register-link, .button.primary, .primary-cta, .course-primary-cta,
  a[data-registration]
):focus-visible {
  outline: 3px solid #ffd166 !important;
  outline-offset: 3px !important;
}

html body :is(
  .register-link, .button.primary, .primary-cta, .course-primary-cta,
  a[data-registration]
):is([disabled], [aria-disabled="true"]) {
  background: #52655a !important;
  border-color: #718078 !important;
  box-shadow: none !important;
  color: #d8dfdb !important;
  cursor: not-allowed !important;
}

/* Course-type controls are implemented under several names across generators:
   cards, family choices, hub tabs, and request tabs. Keep all of them dark. */
html[data-theme="dark"] body :is(
  .course-family-card, .course-card, .course-family-choice,
  .choice-list > button, .course-option, .hub-tabs .tab-btn,
  .request-tab-btn
) {
  background: #17283a !important;
  color: #e8f1f8 !important;
  border-color: #486179 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body :is(.course-family-card, .course-card) {
  background: #132131 !important;
}

html[data-theme="dark"] body :is(.course-icon, .course-icon-fallback) {
  background: #20364b !important;
  color: #a8dcff !important;
}

html[data-theme="dark"] body :is(
  .course-family-choice strong, .course-title, .course-family-card h3,
  .hub-tab-label, .request-tab-label
) {
  color: #f1f7fc !important;
}

html[data-theme="dark"] body :is(
  .course-family-choice span, .course-help, .course-details,
  .course-family-choice .course-price
) {
  color: #b7c8d8 !important;
}

html[data-theme="dark"] body :is(
  .course-family-choice, .choice-list > button, .course-option,
  .hub-tabs .tab-btn, .request-tab-btn
):hover {
  background: #203a52 !important;
  color: #ffffff !important;
  border-color: #75b8e2 !important;
}

html[data-theme="dark"] body :is(
  .course-family-choice[aria-pressed="true"],
  .choice-list > button[aria-pressed="true"],
  .course-option[aria-pressed="true"],
  .hub-tabs .tab-btn.active,
  .request-tab-btn.active
) {
  background: #105f8c !important;
  color: #ffffff !important;
  border-color: #8bd4ff !important;
  box-shadow: inset 4px 0 0 #8bd4ff !important;
}

.site-theme-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 42px;
  min-height: 42px;
  margin-left: .65rem;
  padding: .45rem .7rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 700 .85rem/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
  vertical-align: middle;
  white-space: nowrap;
}

.site-theme-toggle:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.site-theme-toggle:focus-visible {
  outline: 3px solid #f6b900;
  outline-offset: 3px;
}

.site-theme-toggle-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.site-theme-fallback {
  position: fixed;
  top: .75rem;
  right: .75rem;
  z-index: 10000;
  background: #fff;
  color: #172334;
  box-shadow: 0 4px 18px rgb(0 0 0 / 22%);
}

html[data-theme="dark"] .site-theme-fallback {
  background: #172334;
  color: #eef5fc;
}

@media (max-width: 540px) {
  .site-theme-toggle {
    min-width: 40px;
    min-height: 40px;
    padding: .4rem .55rem;
  }
  .site-theme-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media print {
  .site-theme-toggle { display: none !important; }
}