/* 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);
  }
}