/* Neutral dark surfaces; blue is reserved for selection and primary actions. */
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-data: var(--font-ui);
  --font-code: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  color-scheme: dark;
  --canvas: #161819;
  --surface: #222629;
  --surface-inset: #1b1e20;
  --surface-raised: #292f33;
  --control: #2e3438;
  --control-hover: #384146;
  --control-line: #626f77;
  --ink: #f2f5f6;
  --muted: #b6c0c5;
  --line: #444d52;
  --accent: #b3d9ee;
  --accent-hover: #d0e8f5;
  --accent-ink: #153548;
  --selected: #304958;
  --selected-line: #84aabf;
  background: var(--canvas);
}
body, body[class*="theme-"] { background: var(--canvas); color: var(--ink); }
#fx-overlay .veil { display: none; }
.glass { background: var(--surface); border-color: var(--line); }
#planner-panel { background: var(--surface) !important; border-color: var(--line) !important; }
.planner-heading { background: transparent; border-color: var(--line); }
.planner-heading h2, .planner-brand, .section-head h2 { color: var(--ink); }
.planner-brand span, .planner-data-status, .section-head p, .intro-steps-list p, .benefit-card p, .planner-faq p { color: var(--muted); }
.planner-data-status { background: transparent; border-color: transparent; }
.planner-toolbar { background: var(--surface-inset); border-color: var(--line); }
.planner-control label, .filter-group-label, .weather-selection-heading p, .active-filter-summary { color: var(--muted); }
.planner-control select { background: var(--control) !important; border-color: var(--control-line) !important; color: var(--ink) !important; }
.planner-control select:hover { background: var(--control-hover) !important; border-color: var(--accent) !important; }
.planner-control select option { background: var(--surface); color: var(--ink); }
.planner-button { background: var(--control); border-color: var(--control-line); color: var(--ink); }
.planner-button:hover:not(:disabled) { background: var(--control-hover); border-color: var(--accent); }
.region-btn, .range-btn { background: var(--surface-inset); border-color: var(--line); color: var(--muted); }
.region-btn.active, .range-btn.active { background: var(--selected); border-color: var(--selected-line); color: var(--ink); }
.region-btn:hover:not(.active), .range-btn:hover:not(.active) { background: var(--control); border-color: var(--selected-line); color: var(--ink); }
#hazard-filter-bar, .results-toolbar, .route-summary-row { border-color: var(--line); }
.weather-selection-heading h3, #route-count-summary { color: var(--ink); }
#hazard-filter-all { color: var(--accent); border-color: var(--control-line); }
.hazard-chip.weather-tile.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px #b3d9ee33; }
.hazard-chip.weather-tile input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
.hazard-chip.weather-tile.active input[type=checkbox]::after { border-color: var(--accent-ink); }
#routes-table { background: var(--surface-inset); border-color: var(--line); }
#routes-table thead { background: var(--surface-raised) !important; }
#routes-table th, .route-direction, .route-airport-name, .preflight-duration, .arrival-zone, .route-card-weather { color: var(--muted); }
#routes-table .text-white\/60, .route-card .text-white\/60 { color: var(--muted); }
.flight-duration, .arrival-value { color: var(--ink); }
#planner-panel .icao-link { color: var(--accent) !important; text-decoration-color: var(--selected-line) !important; }
.route-summary-actions a, .route-card-actions a { background: var(--accent) !important; color: var(--accent-ink) !important; border-color: var(--accent) !important; }
.route-summary-actions a:hover, .route-card-actions a:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
#routes-cards .route-card { background: var(--surface) !important; border-color: var(--line) !important; }
.route-card-heading { background: transparent; border-color: var(--line); }
.route-details-row .route-detail-content, .route-card .route-detail-content:not(:empty) { background: var(--surface-inset); border-color: var(--line); }
.route-detail-grid h4 { color: var(--accent); }
.routes-empty-state { background: var(--surface-inset); border-color: var(--line); }
.routes-empty-title { color: var(--ink); }
.routes-empty-hint { color: var(--muted); }
.intro-thresholds, .reference-card { background: var(--surface-inset); border-color: var(--line); }
.intro-thresholds-content, .benefits-section, .guides-section, .reference-section, .planner-explainer, .intro-steps-list li, .benefit-card, .planner-faq-list, .planner-faq { border-color: var(--line); }
.intro-thresholds-table tr { background: var(--surface); }
.intro-thresholds-table td:first-child, .intro-thresholds-note, .disclosure-hint { color: var(--muted); }
.intro-thresholds > summary:hover, .planner-faq > summary:hover { background: var(--surface-raised); color: var(--ink); }
.step-num, .benefit-icon, .planner-explainer a { color: var(--accent); }
.benefit-icon { background: var(--selected); }
.airport-guides { color: var(--muted); }
.airport-guides a { background: var(--surface-inset); border-color: var(--line); color: var(--ink); }
.airport-guides a:hover { border-color: var(--accent); }
.hero-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 24px #0b122133; }
.hero-primary:hover { background: var(--accent-hover); }
#hero-heading span { color: var(--accent); }
#mini-header .mini-bar { background: var(--surface-inset); border-color: var(--line); }
.mini-filters-link { background: var(--control); border-color: var(--control-line); color: var(--ink); }
.site-footer { background: #111315; border-color: var(--line); }
.site-footer p, .site-footer li { color: var(--muted); }
.site-footer a { color: var(--accent); }
#sticky-settings-bar > div { background: var(--surface-inset); border-color: var(--line) !important; }
/* Secondary labels stay readable in the settings and weather dialogs, too. */
:is([id$="-modal"], #settings-help-popup, #sticky-settings-bar, .reference-section) [class*="text-cyan-"] { color: var(--muted); }
:is([id$="-modal"], #settings-help-popup, .reference-section) [class*="text-cyan-100"] { color: var(--ink); }
:is([id$="-modal"], #settings-help-popup) iconify-icon[class*="text-cyan-"] { color: var(--accent); }
.guide-page .site-header, .guide-page .related-guides, .guide-page footer { border-color: var(--line); }
.guide-page h1, .guide-page h2, .guide-page dt { color: var(--ink); }
.guide-page .brand span, .guide-page .lead, .guide-page .breadcrumbs, .guide-page footer { color: var(--muted); }
.guide-page a { color: var(--accent); }
.guide-page a:hover { color: var(--accent-hover); }
.guide-page .cta { background: var(--accent); color: var(--accent-ink); }
.guide-page .cta:hover { background: var(--accent-hover); color: var(--accent-ink); }
@media (max-width: 900px) {
  .glass { background: var(--surface) !important; border-color: var(--line) !important; }
}
@media (max-width: 767px) {
  .planner-data-status { background: transparent; border-color: transparent; }
}