/* The browser follows the system preference, including changes while a page is open. */
:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e3eeec;
    --muted: #a5b8b5;
    --line: #354b4c;
    --paper: #101c20;
    --orange: #f39a74;
    --pale: #273d3e;
    --surface: #192b2f;
    --surface-raised: #22373b;
    --positive: #b6dba4;
    --warning: #f2d48d;
    --danger: #ffb697;
  }

  .topbar,
  .panel,
  .spot-card,
  .report-card,
  .empty-state,
  .skip-link,
  .button.secondary,
  .activity-year-navigation .button:disabled,
  .filter-bar input:not([type="submit"]),
  .filter-bar select,
  .search-field,
  .check-option,
  .time-picker-options,
  .search-select-results,
  .editor-form input:not([type="submit"]):not([type="checkbox"]):not([type="hidden"]),
  .editor-form select,
  .editor-form textarea,
  .comment-form textarea {
    background-color: var(--surface);
    border-color: var(--line);
    color: var(--ink);
  }

  .global-search input {
    color: var(--ink);
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--muted);
    opacity: 1;
  }

  .editor-form input[readonly] {
    background: var(--paper) !important;
    color: var(--muted);
  }

  .editor-form select,
  .filter-bar select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23a5b8b5' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  }

  .check-option input {
    accent-color: #8bc8bc;
  }

  .button {
    background: #28606a;
  }

  .button:hover {
    background: #327581;
  }

  .button.accent {
    background: var(--orange);
    color: #291b15;
  }

  .button.accent:hover {
    background: #ffb08e;
  }

  .button.secondary:hover,
  .time-picker-options li:hover,
  .time-picker-options li[aria-selected="true"],
  .search-select-results li:hover,
  .search-select-results li[aria-selected="true"] {
    background: var(--pale);
  }

  .session-fields,
  .session-strip,
  .gear-model-wizard,
  .date-tile,
  .spot-cover,
  .spot-coordinate,
  .map-panel,
  .demo-info {
    background: var(--surface-raised);
    border-color: var(--line);
  }

  .footer,
  .prose p,
  .global-search,
  .report-excerpt,
  .session-strip > span,
  .date-tile span,
  .spot-coordinate,
  .demo-info {
    color: var(--muted);
  }

  .location-link,
  .gear-size,
  .plan-cta {
    color: #a0cdbb;
  }

  .spot-card-footer,
  .feed-divider {
    border-color: var(--line);
  }

  .plan-people .avatar + .avatar {
    border-color: var(--surface);
  }

  .tag,
  .count-pill,
  .nav-count {
    background: #304a3d;
    color: var(--positive);
  }

  .flash {
    background: #273d2c;
    border-color: #4a6745;
    color: var(--positive);
  }

  .form-errors,
  .flash.alert {
    background: #442b25;
    border-color: #825443;
    color: var(--danger);
  }

  .danger {
    color: var(--danger);
  }

  .verification-banner,
  .approval-status {
    background: #403722;
    border-color: #77653b;
    color: var(--warning);
  }

  .avatar {
    background: #2a474f;
    color: #b7dce2;
  }

  .tone-1 {
    background: #4e382c;
    color: #e6c1a7;
  }

  .tone-2 {
    background: #35462b;
    color: #c7dfb0;
  }

  .tone-3 {
    background: #49364a;
    color: #dfbee0;
  }

  .activity-day {
    background: #2b3e3c;
    color: var(--ink);
  }

  .activity-level-1 {
    background: #335744;
  }

  .activity-level-2 {
    background: #458263;
    color: #fff;
  }

  .activity-level-3 {
    background: #78b894;
    color: #10251e;
  }

  .activity-level-4 {
    background: #b5dca5;
    color: #10251e;
  }

  .cover-tag,
  .map-status {
    background: #192b2feb;
    color: var(--ink);
  }

  /* MapLibre loads its stylesheet lazily, so keep popup overrides more specific. */
  .map-panel .maplibregl-popup-content {
    background: var(--surface);
    color: var(--ink);
  }

  .map-panel .maplibregl-popup-anchor-top .maplibregl-popup-tip,
  .map-panel .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
  .map-panel .maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
    border-bottom-color: var(--surface);
  }

  .map-panel .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
  .map-panel .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
  .map-panel .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
    border-top-color: var(--surface);
  }

  .map-panel .maplibregl-popup-anchor-left .maplibregl-popup-tip {
    border-right-color: var(--surface);
  }

  .map-panel .maplibregl-popup-anchor-right .maplibregl-popup-tip {
    border-left-color: var(--surface);
  }
}

@media (prefers-color-scheme: dark) {
  .recording-explorer {
    --reach: #65d3cf;
    --fastest: #ffb37f;
    --longest: #c8a8f2;
    --stop: #a7c9d4;
    color: var(--ink);
  }

  .recording-explorer,
  .recording-explorer-controls,
  .recording-map-control,
  .recording-event,
  .recording-analysis select,
  .recording-wind-overlay,
  .recording-map-legend,
  .recording-map-empty,
  :root .recording-drawing-settings[open],
  :root .lab-speed,
  :root .lab-controls input,
  :root .lab-controls select {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
  }

  .recording-feature-card,
  .recording-map-inspector,
  .recording-detail-switch,
  .recording-view-switch,
  .recording-wind-dial,
  .recording-timeline-rail::before {
    background: var(--surface-raised);
    color: var(--ink);
    border-color: var(--line);
  }

  .recording-sidebar,
  .recording-window-controls,
  .recording-explorer-controls .recording-map-toolbar {
    border-color: var(--line);
  }

  .recording-event:hover,
  .recording-event[aria-pressed="true"],
  .recording-timeline-window {
    background: #285451;
    color: var(--ink);
  }

  .recording-event {
    border-left-color: var(--reach);
  }
  .recording-event.is-turn {
    border-left-color: #f08cb4;
  }
  .recording-event.is-stop {
    border-left-color: var(--stop);
  }
  .recording-key.is-turn i {
    background: #f08cb4;
  }

  .recording-feature-card.is-fastest,
  .recording-badge {
    background: #493326;
    border-color: #805335;
    color: var(--fastest);
  }
  .recording-feature-card.is-longest,
  .recording-badge.is-longest {
    background: #392f4c;
    border-color: #675180;
    color: var(--longest);
  }

  .recording-eyebrow,
  .recording-map-hint,
  .recording-card-detail,
  .recording-control-label,
  .recording-selection-time,
  .recording-selection-metrics span,
  .recording-map-inspector > span,
  .recording-event > span,
  .recording-window-controls output,
  .recording-timeline-labels,
  .recording-wind-overlay small {
    color: var(--muted);
  }

  .recording-wind-overlay strong,
  .recording-detail-switch button,
  .recording-view-switch button {
    color: var(--ink);
  }
  .recording-detail-switch button[aria-pressed="true"],
  .recording-view-switch button[aria-pressed="true"] {
    background: #327581;
    color: #fff;
  }
  .recording-wind-arrow,
  .recording-wind-north {
    color: var(--reach);
  }
  .recording-wind-north {
    background: var(--surface);
  }
  .recording-timeline-window {
    border-color: var(--reach);
  }
  .recording-timeline-handle::after {
    background: var(--reach);
    border-color: var(--surface);
  }
  .recording-explorer button:focus-visible {
    outline-color: var(--reach);
  }
  .recording-map-control[aria-pressed="false"] {
    background: var(--paper);
    color: var(--muted);
  }

  :root .lab-board {
    --lab-grid: #354b4c;
    --lab-label: #a5b8b5;
    --lab-stroke: #85c5d1;
    --lab-route: #829b9e;
    --lab-reach: #65d3cf;
    --lab-turn: #f08cb4;
    background: var(--paper);
    border-color: var(--line);
  }
}

@media (prefers-color-scheme: dark) {
  .recording-explorer .maplibregl-ctrl-group,
  .recording-explorer .maplibregl-ctrl-attrib {
    background: var(--surface);
    color: var(--ink);
  }
  .recording-explorer .maplibregl-ctrl-group button + button {
    border-top-color: var(--line);
  }
  .recording-explorer .maplibregl-ctrl-group button:hover {
    background-color: var(--surface-raised);
  }
  .recording-explorer .maplibregl-ctrl-icon,
  .recording-explorer .maplibregl-ctrl-attrib-button {
    filter: invert(1);
  }
}