/* Dark palette: the corporate navy stays a background color in both themes. */
html[data-theme="dark"] {
  color-scheme: dark;
  background: #0b1423;
  --cream: #0b1423;
  --surface: #17263b;
  --ink: #e8eef7;
  --muted: #b2c0d2;
  --line: #304157;
  --green: #89f5e7;
  --dark-panel: #111e30;
  --dark-panel-raised: #17263b;
  --dark-accent: #89f5e7;
  --dark-accent-ink: #073d39;
}
html[data-theme="dark"] body { background: var(--cream); color: var(--ink); }
html[data-theme="dark"] main > section + section { border-color: var(--line); }
html[data-theme="dark"] .skip-link { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .site-header { background: #0b1423ed; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .site-header[data-scrolled] { box-shadow: 0 4px 24px #00000030; }
html[data-theme="dark"] .brand-name small { color: var(--mint); }
html[data-theme="dark"] .main-navigation { border-color: var(--line); }
html[data-theme="dark"] .main-navigation a { color: var(--ink); }
html[data-theme="dark"] .main-navigation a:hover,
html[data-theme="dark"] .main-navigation a[aria-current="page"] { color: var(--mint); }
html[data-theme="dark"] .main-navigation .nav-contact { background: var(--mint); color: var(--navy); }
html[data-theme="dark"] .main-navigation .nav-contact:hover,
html[data-theme="dark"] .main-navigation .nav-contact[aria-current="page"] { background: #b4fff3; color: var(--navy); }
html[data-theme="dark"] .menu-toggle,
html[data-theme="dark"] .theme-toggle { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .theme-toggle:hover { background: #23364c; color: var(--mint); }
html[data-theme="dark"] .button-primary { background: var(--mint); color: var(--navy); }
html[data-theme="dark"] .button-primary:hover { background: #b4fff3; }
html[data-theme="dark"] .button-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .button-secondary:hover { background: #23364c; }
html[data-theme="dark"] .module-card,
html[data-theme="dark"] .support-card,
html[data-theme="dark"] .university-nodes,
html[data-theme="dark"] .interest-form-card,
html[data-theme="dark"] .country-grid,
html[data-theme="dark"] .country-card { background: var(--dark-panel); color: var(--ink); border-color: var(--line); box-shadow: none; }
html[data-theme="dark"] .module-icon,
html[data-theme="dark"] .route-badge,
html[data-theme="dark"] .contact-badge,
html[data-theme="dark"] .community-badge { background: var(--dark-accent-ink); color: var(--mint); }
html[data-theme="dark"] .about .eyebrow { color: var(--mint); }
html[data-theme="dark"] .closing-card { border: 1px solid var(--line); }
html[data-theme="dark"] .site-footer { border-top: 1px solid var(--line); }
/* Native dialogs inherit the same readable surfaces as their originating page. */
html[data-theme="dark"] .information-dialog,
html[data-theme="dark"] .account-dialog { background: var(--dark-panel); color: var(--ink); border-color: var(--line); box-shadow: 0 24px 80px #00000070; }
html[data-theme="dark"] .information-dialog::backdrop { background: #000000b3; }
html[data-theme="dark"] .information-dialog-close,
html[data-theme="dark"] .information-dialog-back,
html[data-theme="dark"] .dialog-close { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .information-dialog-content strong,
html[data-theme="dark"] .information-dialog-content h3,
html[data-theme="dark"] .detail-meta dt { color: var(--ink); }
html[data-theme="dark"] .information-dialog-content .detail-meta { background: var(--surface); }
/* The scenic hero already has a dark overlay; preserve its text and controls. */
html[data-theme="dark"] .home-context,
html[data-theme="dark"] .home-start { background: var(--dark-panel); border-color: var(--line); }
html[data-theme="dark"] .home-context strong { color: var(--ink); }
html[data-theme="dark"] .home-hero .button-secondary { background: #0d1c3270; color: white; border-color: #ffffff80; }
html[data-theme="dark"] .home-hero .button-secondary:hover { background: #0d1c32b3; }
/* Contact form, selected states and validation feedback. */
html[data-theme="dark"] .contact-page .contact-intro { background: var(--cream); }
html[data-theme="dark"] .interest-form-card > p:not(.eyebrow),
html[data-theme="dark"] .field-help,
html[data-theme="dark"] .form-demo-note,
html[data-theme="dark"] .network-stats .stats-demo-note,
html[data-theme="dark"] .faq-heading > p:last-child,
html[data-theme="dark"] .faq-item > p,
html[data-theme="dark"] .contact-info-block p,
html[data-theme="dark"] .contact-info-block .contact-info-demo { color: var(--muted); }
html[data-theme="dark"] .email-field { background: var(--cream); border-color: var(--line); }
html[data-theme="dark"] .email-field > span { color: var(--muted); }
html[data-theme="dark"] .email-field input { color: var(--ink); }
html[data-theme="dark"] .email-field input::placeholder { color: #9cabc0; }
html[data-theme="dark"] .email-field:focus-within { outline-color: var(--mint); }
html[data-theme="dark"] .country-select { background: var(--cream); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .option-card { color: var(--ink); }
html[data-theme="dark"] .option-icon { background: #263c50; color: var(--ink); }
html[data-theme="dark"] .option-card:has(input:checked) { background: #163b3a; color: var(--ink); border-color: var(--mint); }
html[data-theme="dark"] .option-card:has(input:checked) .option-icon { background: var(--mint); color: var(--navy); }
html[data-theme="dark"] .support-icon { background: var(--mint); color: var(--navy); }
html[data-theme="dark"] .support-icon.navy-icon { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .green-stat { background: var(--mint); color: var(--navy); }
html[data-theme="dark"] .white-stat { background: #263c50; color: var(--ink); }
html[data-theme="dark"] .neutral-badge { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .form-demo-note { border-color: var(--line); }
html[data-theme="dark"] .form-feedback { background: #143b36; color: #baf3dc; }
html[data-theme="dark"] .form-feedback[data-state="error"] { background: #3a1d29; color: #ffb1b7; }
/* Routes, transport, tourism cards and external directions. */
html[data-theme="dark"] .route-intro,
html[data-theme="dark"] .sites-section { background: var(--cream); }
html[data-theme="dark"] .travel-mode,
html[data-theme="dark"] .route-timeline li > div,
html[data-theme="dark"] .route-metrics > div,
html[data-theme="dark"] .time-control,
html[data-theme="dark"] .route-map,
html[data-theme="dark"] .smart-alert,
html[data-theme="dark"] .site-card { background: var(--dark-panel); color: var(--ink); border-color: var(--line); box-shadow: none; }
html[data-theme="dark"] .route-timeline .timeline-stop > div { background: #143b36; }
html[data-theme="dark"] .timeline-icon { background: #263c50; }
html[data-theme="dark"] .route-timeline li:not(:first-child) .timeline-icon,
html[data-theme="dark"] .planner-heading > span { background: var(--mint); color: var(--navy); }
html[data-theme="dark"] .route-timeline li:not(:last-child)::before { background: var(--line); }
html[data-theme="dark"] .map-switch,
html[data-theme="dark"] .map-coordinates,
html[data-theme="dark"] .site-meta,
html[data-theme="dark"] .institutional-note { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .map-switch button,
html[data-theme="dark"] .country-filters button { background: var(--dark-panel); color: var(--ink); }
html[data-theme="dark"] .map-switch button[aria-pressed="true"],
html[data-theme="dark"] .country-filters button[aria-pressed="true"] { background: var(--mint); color: var(--navy); }
html[data-theme="dark"] .sites-section > .section-inner > .eyebrow { background: var(--dark-accent-ink); color: var(--mint); border-color: #89f5e740; }
html[data-theme="dark"] .places-filter label { color: var(--ink); }
html[data-theme="dark"] .places-filter select { background: var(--dark-panel); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .filter-status { color: var(--muted); }
html[data-theme="dark"] .place-photo-source { color: var(--mint); }
html[data-theme="dark"] .site-card[open] { border-color: #89f5e770; }
html[data-theme="dark"] .site-summary-icon { background: var(--dark-accent-ink); color: var(--mint); }
html[data-theme="dark"] .site-image { background: var(--surface); }
html[data-theme="dark"] .place-route-link--google { background: var(--mint); color: var(--navy); }
html[data-theme="dark"] .place-route-link--google:hover { background: #b4fff3; border-color: #b4fff3; }
html[data-theme="dark"] .place-route-link--waze { background: var(--dark-panel); color: var(--mint); }
html[data-theme="dark"] .place-route-link--waze:hover { background: #23364c; }
/* Keep the diagram's labels, waterway and routes distinguishable in dark mode. */
html[data-theme="dark"] .map-drawing > rect:first-of-type { fill: #132436; }
html[data-theme="dark"] .map-drawing pattern path { stroke: var(--line); }
html[data-theme="dark"] .map-drawing .terrain-lines { stroke: #567063; }
html[data-theme="dark"] .map-drawing > path[stroke="#c6dced"] { stroke: #28475f; }
html[data-theme="dark"] .map-drawing .mandatory-route { stroke: #b8cee7; }
html[data-theme="dark"] .map-drawing .cultural-route { stroke: var(--mint); }
html[data-theme="dark"] .map-drawing .heritage-marker rect { fill: #24364c; }
html[data-theme="dark"] .map-drawing text { fill: var(--ink); }
html[data-theme="dark"] .map-drawing circle[fill="#0d1c32"] { fill: #b8cee7; }
html[data-theme="dark"] .map-drawing circle[fill="#006a61"] { fill: var(--mint); }
html[data-theme="dark"] .map-drawing circle[stroke="white"] { stroke: #132436; }
html[data-theme="dark"] .legend-dot.navy { background: #b8cee7; }
html[data-theme="dark"] .university-node .node-specialty { color: var(--mint); }
html[data-theme="dark"] :focus-visible,
html[data-theme="dark"] .option-card:has(input:focus-visible) { outline-color: var(--mint); }