/* DESIGN SYSTEM «LIQUID GLASS» — i token. Lo stile Apple: superfici di vetro smerigliato che sfocano ciò che hanno dietro, bordi illuminati in alto,
   forme tondeggianti (capsule), colori vivi sotto il vetro, movimento «a molla».
   Questo file è TUTTO ciò che serve per cambiare l'aspetto: nomi e significato sono nel contratto (web/ds/contract.json), la guida è docs/DESIGN-SYSTEM.md.
   Regole: i colori si scrivono #hex o rgb()/rgba() (i test ne calcolano il contrasto); lo schema scuro ridefinisce i colori e i valori che cambiano
   (ombre, filtri), tutto il resto lo eredita. Ogni coppia testo/sfondo è verificata da tests/ds.test.mjs: chi aggiunge una coppia la aggiunge lì. */

:root {
  /* ---- scritta */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* i campi di testo restano a 16px: più piccoli e iOS ingrandisce la pagina quando li tocchi */
  --t-cap: 12px; --t-meta: 13px; --t-sm: 15px; --t-body: 16px; --t-title: 20px;

  /* ---- spazi, angoli (grandi: il vetro è fatto di capsule e curve concentriche) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;
  --r-s: 10px; --r-m: 14px; --r-l: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ---- movimento: una molla (dove il browser sa fare linear()), altrimenti una curva con un po' di rimbalzo */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .64, 1);
  --d1: 140ms; --d2: 260ms; --d3: 420ms;

  /* ---- misure dei componenti */
  --fab: 56px; --column: 640px;
  --hit: 44px;       /* il bersaglio minimo da toccare */
  --pin: 40px;       /* il pallino di una città sulla mappa della regione */
  --node: 52px;      /* il pallino di una missione sulla mappa della città */
  --icon-stroke: 1.8;

  /* ---- schema chiaro: «giorno sul Mediterraneo» */
  color-scheme: light;
  --bg: #C9E5F5;                 /* il mare: il colore con cui sono dipinte la pagina e le barre di Telegram */
  --surface: #FFFFFF;            --surface-2: #E8F1F7;
  --text: #0A1F33;               --muted: #46607A;
  --border: #5B7A95;             --line: rgba(10, 31, 51, .12);
  --scrim: rgba(8, 24, 40, .38);
  --accent: #0A55BF;             --accent-contrast: #FFFFFF;        --accent-soft: #D7E7FB;        --accent-glow: rgba(10, 85, 191, .38);
  --danger: #B3202A;             --danger-contrast: #FFFFFF;        --danger-soft: #FBE3E4;
  --ok: #157A3E;                 --ok-contrast: #FFFFFF;            --ok-soft: #D9F2E3;

  /* i cinque livelli: colore pieno e il colore dell'icona o del numero scritto SOPRA */
  --lv-a1: #34C38F;  --lv-a1-ink: #0A1F33;
  --lv-a2: #4DB1F3;  --lv-a2-ink: #0A1F33;
  --lv-b1: #9B8CF5;  --lv-b1-ink: #0A1F33;
  --lv-b2: #F7A540;  --lv-b2-ink: #0A1F33;
  --lv-m:  #F26B76;  --lv-m-ink:  #0A1F33;

  /* il vetro: tre spessori (sottile, normale, spesso), la versione opaca per chi non può sfocare, i bordi, la luce */
  --glass-thin-bg: rgba(255, 255, 255, .30);
  --glass-reg-bg: rgba(255, 255, 255, .50);
  --glass-thick-bg: rgba(255, 255, 255, .74);
  --glass-solid-bg: #F2F8FC;
  --glass-edge: rgba(255, 255, 255, .75);
  --glass-edge-hi: rgba(255, 255, 255, .95);       /* il filo di luce sul bordo alto */
  --glass-edge-lo: rgba(10, 31, 51, .10);          /* l'ombra sottile sul bordo basso */
  --glass-thin-filter: blur(14px) saturate(1.6);
  --glass-reg-filter: blur(22px) saturate(1.8);
  --glass-thick-filter: blur(34px) saturate(1.9);
  --glass-shadow: 0 12px 32px rgba(10, 50, 90, .18), 0 2px 8px rgba(10, 50, 90, .10);
  --glass-spec: linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .28) 100%);
  --shadow: 0 16px 40px rgba(10, 50, 90, .22), 0 3px 10px rgba(10, 50, 90, .12);
  --shadow-sm: 0 4px 12px rgba(10, 50, 90, .26), 0 1px 3px rgba(10, 50, 90, .16);              /* a small drop shadow: the thumb of a switch, the seals and pins of the map */
  --scrim-blur: 8px;

  /* la mappa */
  --map-sea-1: #D2EAF8;  --map-sea-2: #8CC5EA;       /* il mare, dal nord al sud */
  --map-land: #F3F7FA;                               /* la terra attorno (regioni vicine) */
  --map-edge: rgba(255, 255, 255, .88);              /* il bordo di ogni regione */
  --map-halo: rgba(255, 255, 255, .85);              /* l'alone chiaro sotto le linee e le scritte */
  --map-route: rgba(10, 31, 51, .55);                /* il tratto ancora da fare */
  --map-route-done: #0A1F33;                         /* il tratto fatto */
  --map-label: #0A1F33;

  /* la città */
  --city-land: #EAF3E4;
  --city-block-1: #F7F2E7;  --city-block-2: #F1E6D3;  --city-block-3: #E8DAC0;
  --city-park: #BFE3B4;  --city-water: #A9D8F0;  --city-road: #FFFFFF;
  --city-landmark: #D9694F;  --city-landmark-2: #F3C44F;

  /* i pallini bloccati */
  --node-locked: rgba(255, 255, 255, .62);  --node-locked-ink: #3E566E;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B2236;
  --surface: #14293D;            --surface-2: #1D3650;
  --text: #EAF3FA;               --muted: #9DB6CB;
  --border: #6F8CA6;             --line: rgba(255, 255, 255, .12);
  --scrim: rgba(0, 6, 14, .58);
  --accent: #7DB7FF;             --accent-contrast: #04162E;        --accent-soft: #1E3A5F;        --accent-glow: rgba(125, 183, 255, .40);
  --danger: #FF8D93;             --danger-contrast: #2A0507;        --danger-soft: #3F1F25;
  --ok: #5FD38D;                 --ok-contrast: #04210F;            --ok-soft: #173A2A;

  --lv-a1: #2AAE7C;  --lv-a1-ink: #04162E;
  --lv-a2: #3C9BE0;  --lv-a2-ink: #04162E;
  --lv-b1: #8B7BE8;  --lv-b1-ink: #04162E;
  --lv-b2: #E8963A;  --lv-b2-ink: #04162E;
  --lv-m:  #E5566A;  --lv-m-ink:  #04162E;

  --glass-thin-bg: rgba(14, 30, 48, .54);
  --glass-reg-bg: rgba(12, 26, 42, .70);
  --glass-thick-bg: rgba(10, 22, 36, .90);
  --glass-solid-bg: #12263A;
  --glass-edge: rgba(255, 255, 255, .20);
  --glass-edge-hi: rgba(255, 255, 255, .26);
  --glass-edge-lo: rgba(0, 0, 0, .35);
  --glass-thin-filter: blur(14px) saturate(1.5);
  --glass-reg-filter: blur(22px) saturate(1.6);
  --glass-thick-filter: blur(34px) saturate(1.7);
  --glass-shadow: 0 14px 36px rgba(0, 0, 0, .50), 0 2px 8px rgba(0, 0, 0, .35);
  --glass-spec: linear-gradient(135deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, .05) 100%);
  --shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 3px 10px rgba(0, 0, 0, .40);
  --shadow-sm: 0 5px 14px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .35);

  --map-sea-1: #0F3350;  --map-sea-2: #071A2B;
  --map-land: #1C3C58;
  --map-edge: rgba(255, 255, 255, .30);
  --map-halo: rgba(11, 34, 54, .78);
  --map-route: rgba(234, 243, 250, .62);
  --map-route-done: #EAF3FA;
  --map-label: #EAF3FA;

  --city-land: #16303F;
  --city-block-1: #1D3A4D;  --city-block-2: #234559;  --city-block-3: #2A5068;
  --city-park: #1E5A4A;  --city-water: #12466B;  --city-road: #2C5570;
  --city-landmark: #E9835F;  --city-landmark-2: #F0C65A;

  --node-locked: rgba(8, 20, 34, .62);  --node-locked-ink: #B8CEDF;
}

/* la molla vera, dove il browser la sa fare (Safari 17.2+, Chrome 113+) */
@supports (transition-timing-function: linear(0, 1)) {
  :root { --ease-spring: linear(0, 0.037, 0.129, 0.253, 0.39, 0.528, 0.655, 0.767, 0.861, 0.935, 0.991, 1.03, 1.055, 1.068, 1.073, 1.071, 1.065, 1.056, 1.046, 1.036, 1.027, 1.018, 1.011, 1.005, 1.001, 0.998, 0.996, 0.995, 0.995, 0.995, 0.995, 0.996, 0.997, 0.997, 0.998, 0.999, 1); }
}