/* One palette for reading surfaces, controls, and the embedded world map.
   Hero composition and illustration treatment are defined separately. */
:root {
  color-scheme: light;
  --map-land: #e0e6f0;
  --map-border: #fcfcfd;
  --map-active: #3157e5;
  --map-active-border: #2042bc;
  --tooltip-bg: #192338;
  --tooltip-text: #ffffff;
}

.map-tooltip {
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  border: 1px solid var(--line);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #141820;
    --surface: #1c222c;
    --text: #f1f3f8;
    --muted: #b0bacb;
    --line: #374150;
    --accent: #9aacff;
    --map-land: #394759;
    --map-border: #18202b;
    --map-active: #91a7ff;
    --map-active-border: #bdcaff;
    --tooltip-bg: #f1f3f8;
    --tooltip-text: #172134;
  }

  .site-header,
  .nav-actions select,
  .nav-actions select option {
    background: var(--bg);
    color: var(--text);
  }
  .brand img { filter: grayscale(1) invert(1); }
  .nav-actions button:hover,
  .nav-actions select:hover { border-color: #79869d; }
  .product-tabs button[aria-selected="true"] {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px #9aacff14;
  }
  .product-panel { box-shadow: inset 0 0 0 1px #ffffff07; }
  .button:not(.light) { background: #365cde; color: #ffffff; }
  .button:hover { box-shadow: 0 9px 20px #00000030; }
  .map-tooltip { border-color: #d7dfed; box-shadow: 0 5px 18px #00000038; }
  ::selection { background: #91a7ff; color: #141820; }
}