/* Shared light/dark/system palette. The html[data-theme] specificity keeps
   these tokens authoritative even on pages with their own inline :root block. */
html[data-theme="light"],
html[data-theme="system"] {
    color-scheme: light;
    --bg: #f4f7fb;
    --panel: #ffffff;
    --panel-contrast: #f8fafc;
    --card: #ffffff;
    --card2: #f8fafc;
    --card-accent: #edf2f7;
    --text: #111827;
    --muted: #4b5563;
    --primary: #1d4ed8;
    --primary2: #2563eb;
    --primary-strong: #1e40af;
    --primary-button-hover: #1e40af;
    --accent: #047857;
    --info: #0369a1;
    --danger: #b91c1c;
    --amber: #92400e;
    --line: rgba(15, 23, 42, 0.14);
    --glass: rgba(15, 23, 42, 0.045);
    --shadow: 0 10px 26px -16px rgba(15, 23, 42, 0.32);
    --theme-control: #ffffff;
    --theme-control-hover: #eef2f7;
    --theme-inverse: #ffffff;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #080d15;
    --panel: #101722;
    --panel-contrast: #111a27;
    --card: #111927;
    --card2: #162132;
    --card-accent: #1c2533;
    --text: #f3f4f6;
    --muted: #a8b0bd;
    --primary: #60a5fa;
    --primary2: #2563eb;
    --primary-strong: #93c5fd;
    --primary-button-hover: #1d4ed8;
    --accent: #34d399;
    --info: #38bdf8;
    --danger: #f87171;
    --amber: #fbbf24;
    --line: rgba(255, 255, 255, 0.11);
    --glass: rgba(255, 255, 255, 0.055);
    --shadow: 0 10px 28px -16px rgba(0, 0, 0, 0.75);
    --theme-control: #172131;
    --theme-control-hover: #202c3e;
    --theme-inverse: #ffffff;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        color-scheme: dark;
        --bg: #080d15;
        --panel: #101722;
        --panel-contrast: #111a27;
        --card: #111927;
        --card2: #162132;
        --card-accent: #1c2533;
        --text: #f3f4f6;
        --muted: #a8b0bd;
        --primary: #60a5fa;
        --primary2: #2563eb;
        --primary-strong: #93c5fd;
        --primary-button-hover: #1d4ed8;
        --accent: #34d399;
        --info: #38bdf8;
        --danger: #f87171;
        --amber: #fbbf24;
        --line: rgba(255, 255, 255, 0.11);
        --glass: rgba(255, 255, 255, 0.055);
        --shadow: 0 10px 28px -16px rgba(0, 0, 0, 0.75);
        --theme-control: #172131;
        --theme-control-hover: #202c3e;
        --theme-inverse: #ffffff;
    }
}

html[data-theme] body,
html[data-theme] main {
    background-color: var(--bg);
    color: var(--text);
}

html[data-theme] a { color: var(--primary); }
html[data-theme] a:hover { color: var(--primary-strong); }
html[data-theme] p,
html[data-theme] li,
html[data-theme] .subtitle { color: var(--muted); }
html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3,
html[data-theme] h4,
html[data-theme] strong { color: var(--text); }

html[data-theme] :is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 72%, transparent);
    outline-offset: 3px;
}

/* Theme selector */
.theme-control {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    position: relative;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.theme-control::before {
    content: "◐";
    position: absolute;
    left: 10px;
    z-index: 1;
    color: var(--muted);
    font-size: 12px;
    pointer-events: none;
}

.theme-select {
    min-width: 92px;
    height: 34px;
    margin: 0;
    padding: 0 26px 0 28px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--theme-control);
    color: var(--text);
    box-shadow: var(--shadow);
    font: 600 12px/1 system-ui, sans-serif;
    cursor: pointer;
}

.theme-select:hover,
.theme-select:focus-visible {
    background: var(--theme-control-hover);
    border-color: var(--primary);
    outline: 2px solid transparent;
}

.theme-select option {
    background: var(--panel);
    color: var(--text);
}

/* Shared page surfaces */
html[data-theme] header,
html[data-theme] footer,
html[data-theme] #favorites,
html[data-theme] #mobile-drawer,
html[data-theme] .oc-drawer,
html[data-theme] .welcome-box,
html[data-theme] .leaflet-popup-content-wrapper {
    background: var(--panel) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}

html[data-theme] footer,
html[data-theme] footer a,
html[data-theme] header p,
html[data-theme] header nav a,
html[data-theme] .nav-links a,
html[data-theme] .top-nav a { color: var(--muted); }

html[data-theme] header nav a:hover,
html[data-theme] header nav a.active,
html[data-theme] header nav a[aria-current="page"],
html[data-theme] .top-nav a:hover,
html[data-theme] .top-nav a[aria-current="page"] { color: var(--text); }

html[data-theme] .feature-card,
html[data-theme] .camera-card,
html[data-theme] .cam-card,
html[data-theme] .favorite-item,
html[data-theme] .event-card,
html[data-theme] .side-card,
html[data-theme] .callout,
html[data-theme] .toc,
html[data-theme] .route-strip,
html[data-theme] .traffic-banner,
html[data-theme] .link-grid a,
html[data-theme] .nearby-grid a,
html[data-theme] .region-links a,
html[data-theme] .more-pages-grid a,
html[data-theme] .browse-card,
html[data-theme] .featured-guide-card,
html[data-theme] .welcome-chip,
html[data-theme] .welcome-cam-card,
html[data-theme] .workflow > div {
    background-color: var(--card) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}

html[data-theme] :is(
    .camera-card,
    .cam-card,
    .event-card,
    .link-grid a,
    .nearby-grid a,
    .region-links a,
    .more-pages-grid a,
    .browse-card,
    .featured-guide-card,
    .welcome-chip,
    .welcome-cam-card
):is(:hover, :focus-visible) {
    background-color: var(--card-accent) !important;
    color: var(--text) !important;
    border-color: color-mix(in srgb, var(--primary) 48%, var(--line)) !important;
}

html[data-theme] .featured-guide-card:is(:hover, :focus-visible) :is(
    .featured-guide-card-title,
    strong
) { color: var(--text) !important; }

html[data-theme] .featured-guide-card:is(:hover, :focus-visible) .featured-guide-card-copy {
    color: var(--muted) !important;
}

html[data-theme] [style*="background:#111927"],
html[data-theme] [style*="background: #111927"] { background: var(--card) !important; }
html[data-theme] [style*="color:#e5e7eb"],
html[data-theme] [style*="color: #e5e7eb"] { color: var(--text) !important; }
html[data-theme] [style*="color:#9ca3af"],
html[data-theme] [style*="color: #9ca3af"] { color: var(--muted) !important; }

/* Map header and controls */
html[data-theme] .map-controls {
    background: color-mix(in srgb, var(--panel) 82%, transparent) !important;
    border-color: var(--line) !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.14) !important;
}

html[data-theme] .logo h1 { color: var(--text); }
html[data-theme] .logo h2 { color: var(--muted); }

html[data-theme] #map,
html[data-theme] .leaflet-tile-pane { background: var(--bg); }

/* CARTO's dark raster is intentionally near-black. Blend it over a navy
   canvas and gently colorize it for a clearer nighttime map. */
html[data-theme] #map[data-basemap-theme="dark"],
html[data-theme] #map[data-basemap-theme="dark"] .leaflet-tile-pane {
    background: #1b3554;
}

html[data-theme] #map[data-basemap-theme="dark"] .leaflet-tile {
    opacity: 0.7 !important;
    filter: brightness(1.5) contrast(0.8) sepia(0.24) saturate(1.75) hue-rotate(168deg);
}

html[data-theme] .map-legend {
    background: color-mix(in srgb, var(--panel) 90%, transparent) !important;
    color: var(--text) !important;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    backdrop-filter: blur(5px);
}

html[data-theme] .leaflet-bar a,
html[data-theme] .leaflet-bar a:hover {
    background: var(--theme-control) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}

html[data-theme] .control-btn,
html[data-theme] .filter-chip,
html[data-theme] .location-button,
html[data-theme] .layout-btn,
html[data-theme] .drawer-btn,
html[data-theme] .fav-action-btn,
html[data-theme] .fullscreen-btn,
html[data-theme] .add-to-favorites-btn,
html[data-theme] .mobile-drawer-header button {
    background: var(--theme-control) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}

html[data-theme] .control-btn:hover,
html[data-theme] .filter-chip:hover,
html[data-theme] .layout-btn:hover,
html[data-theme] .drawer-btn:hover,
html[data-theme] .fav-action-btn:hover,
html[data-theme] .fullscreen-btn:hover,
html[data-theme] .add-to-favorites-btn:hover,
html[data-theme] .location-button:hover,
html[data-theme] .mobile-drawer-header button:hover {
    background: var(--theme-control-hover) !important;
}

html[data-theme] .filter-chip.active,
html[data-theme] .layout-btn.active {
    background: var(--primary2) !important;
    color: #fff !important;
    border-color: var(--primary2) !important;
}

html[data-theme] .add-to-favorites-btn.active,
html[data-theme] .add-to-favorites-btn.active:hover {
    background: var(--primary2) !important;
    color: #fff !important;
    border-color: var(--primary2) !important;
}

html[data-theme] a.button,
html[data-theme] a.cta-btn,
html[data-theme] a.view-map-btn,
html[data-theme] .welcome-cta-primary {
    color: #fff !important;
}

html[data-theme] a.button:hover,
html[data-theme] a.cta-btn:hover,
html[data-theme] a.view-map-btn:hover,
html[data-theme] .welcome-cta-primary:hover {
    background: var(--primary-button-hover) !important;
    color: #fff !important;
}

html[data-theme] a.button.secondary,
html[data-theme] a.cta-btn.secondary {
    background: transparent !important;
    color: var(--primary) !important;
    border-color: color-mix(in srgb, var(--primary) 45%, transparent) !important;
}

html[data-theme] a.button.secondary:hover,
html[data-theme] a.cta-btn.secondary:hover {
    background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
    color: var(--primary-strong) !important;
}

/* Popups and welcome panel */
html[data-theme] .leaflet-popup-content,
html[data-theme] .leaflet-popup-content p,
html[data-theme] .leaflet-popup-content strong { color: var(--text); }

html[data-theme] .welcome-hero,
html[data-theme] .welcome-actions,
html[data-theme] .welcome-section { border-color: var(--line); }
html[data-theme] .welcome-hero-text h2,
html[data-theme] .welcome-cam-card span { color: var(--text); }
html[data-theme] .welcome-hero-text p,
html[data-theme] .welcome-section-title { color: var(--muted); }
html[data-theme] .welcome-chip,
html[data-theme] .welcome-cam-card,
html[data-theme] .welcome-cta-secondary {
    background: var(--card-accent);
    color: var(--text);
    border-color: var(--line);
}
html[data-theme] .welcome-close { color: var(--muted); }
html[data-theme] :is(
    .welcome-close,
    .hamburger-btn,
    .oc-close,
    .favorites-panel-close
):is(:hover, :focus-visible) {
    background: var(--card-accent) !important;
    color: var(--text) !important;
}

html[data-theme] .welcome-cta-secondary:is(:hover, :focus-visible) {
    background: var(--theme-control-hover) !important;
    color: var(--text) !important;
}

html[data-theme] .oc-nav a:is(:hover, :active, :focus-visible),
html[data-theme] .drawer-nav-link:is(:hover, :active, :focus-visible) {
    background: var(--card-accent) !important;
    color: var(--text) !important;
}

/* Event/editorial hero elements with previously fixed dark colors */
html[data-theme] section.hero {
    background:
        radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--primary2) 18%, transparent), transparent 36%),
        linear-gradient(145deg, var(--panel), var(--card-accent)) !important;
    border-color: var(--line) !important;
}
html[data-theme] .eyebrow,
html[data-theme] .quick-facts span,
html[data-theme] .event-card .date {
    color: var(--primary) !important;
    border-color: color-mix(in srgb, var(--primary) 35%, transparent) !important;
}
html[data-theme] .quick-facts span { background: var(--glass); }
html[data-theme] .source-note { color: var(--muted) !important; }

/* Form controls and tables */
html[data-theme] input,
html[data-theme] textarea,
html[data-theme] select:not(.theme-select) {
    background: var(--panel);
    color: var(--text);
    border-color: var(--line);
}
html[data-theme] table,
html[data-theme] th,
html[data-theme] td { border-color: var(--line) !important; }
html[data-theme] th { background: var(--card-accent) !important; color: var(--text); }

/* Fullscreen camera stays intentionally black for video contrast. */
html[data-theme] #camera-fullscreen-overlay,
html[data-theme] #camera-fullscreen-content { background: #000 !important; }
html[data-theme] #camera-fullscreen-title,
html[data-theme] #camera-fullscreen-close { color: #fff !important; }

@media (max-width: 820px) {
    .theme-select {
        min-width: 84px;
        height: 32px;
        padding-right: 20px;
        font-size: 11px;
    }
}

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