/* Token condivisi da homepage e mappa.
   Identità: la medaglietta del collare — cobalto per agire, ottone per distanze e selezione. */
:root {
  --carta: #f3f5f9;
  --superficie: #ffffff;
  --superficie-2: #eceff5;
  --inchiostro: #17213a;
  --tenue: #586178;
  --bordo: #dde2ec;
  --cobalto: #2747c4;
  --cobalto-testo: #ffffff;
  --cobalto-velo: #e6ebfb;
  --ottone: #f0b429;
  --ottone-scuro: #7a5300;
  --ottone-velo: #fdf3d8;
  --rifugio: #2747c4;
  --sanitario: #d4502f;
  --altro: #7c849a;
  --mare: #d3e1ec;
  --terra: #f8f9fb;
  --confine: #b9c0cf;
  --ombra: 0 1px 2px rgba(23, 33, 58, .06), 0 4px 16px rgba(23, 33, 58, .08);
  --ombra-forte: 0 8px 28px rgba(23, 33, 58, .18);

  --font-titoli: "Gabarito", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-testo: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-cifre: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --raggio: 14px;
  --colonna: 420px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --carta: #0e1320;
    --superficie: #161d2c;
    --superficie-2: #1f2738;
    --inchiostro: #e8ecf5;
    --tenue: #9ca6bc;
    --bordo: #2a3448;
    --cobalto: #7f98ff;
    --cobalto-testo: #0b1022;
    --cobalto-velo: #1d2848;
    --ottone: #f3c34f;
    --ottone-scuro: #f3c34f;
    --ottone-velo: #3a3018;
    --rifugio: #7f98ff;
    --sanitario: #ff8a68;
    --altro: #8e97ad;
    --mare: #0a1220;
    --terra: #222b3d;
    --confine: #3a465d;
    --ombra: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .35);
    --ombra-forte: 0 8px 28px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --carta: #0e1320;
  --superficie: #161d2c;
  --superficie-2: #1f2738;
  --inchiostro: #e8ecf5;
  --tenue: #9ca6bc;
  --bordo: #2a3448;
  --cobalto: #7f98ff;
  --cobalto-testo: #0b1022;
  --cobalto-velo: #1d2848;
  --ottone: #f3c34f;
  --ottone-scuro: #f3c34f;
  --ottone-velo: #3a3018;
  --rifugio: #7f98ff;
  --sanitario: #ff8a68;
  --altro: #8e97ad;
  --mare: #0a1220;
  --terra: #222b3d;
  --confine: #3a465d;
  --ombra: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .35);
  --ombra-forte: 0 8px 28px rgba(0, 0, 0, .5);
  color-scheme: dark;
}