/* ==========================================================
   temi.css — stile "Strumento": fondo piatto, riquadri con bordo
   sottile, numeri in evidenza. Segue il tema chiaro/scuro del
   dispositivo (i colori sono in base.css).

   Il "cielo" resta, ma discreto: una sfumatura in cima alla
   pagina che cambia con il meteo (sereno, nuvoloso, pioggia,
   neve, temporale, nebbia) e con l'ora (giorno, crepuscolo, notte).
   app.js scrive sull'elemento <html> gli attributi data-cielo e
   data-momento; qui a ogni coppia corrisponde un colore.
   ========================================================== */

/* "Proprietà registrata": permette al browser di sfumare da un colore all'altro */
@property --cielo { syntax: '<color>'; inherits: true; initial-value: #2f78d6; }

:root {
  --cielo: #2f78d6;
  --forza-cielo: 22%;            /* quanto il cielo colora la cima della pagina (tema chiaro) */
  --tenue: var(--testo-tenue);
  transition: --cielo 1.2s ease;
}
:root[data-tema="scuro"] { --forza-cielo: 46%; }

:root[data-cielo="sereno"]    { --cielo: #2f78d6; }
:root[data-cielo="nuvoloso"]  { --cielo: #6f8299; }
:root[data-cielo="pioggia"]   { --cielo: #3f6f9f; }
:root[data-cielo="neve"]      { --cielo: #8fa9c9; }
:root[data-cielo="temporale"] { --cielo: #6a5aa8; }
:root[data-cielo="nebbia"]    { --cielo: #8a929c; }

:root[data-momento="notte"][data-cielo="sereno"]    { --cielo: #27408f; }
:root[data-momento="notte"][data-cielo="nuvoloso"]  { --cielo: #3a4760; }
:root[data-momento="notte"][data-cielo="pioggia"]   { --cielo: #23486b; }
:root[data-momento="notte"][data-cielo="neve"]      { --cielo: #55688a; }
:root[data-momento="notte"][data-cielo="temporale"] { --cielo: #3f3470; }
:root[data-momento="notte"][data-cielo="nebbia"]    { --cielo: #4a515b; }

:root[data-momento="crepuscolo"][data-cielo="sereno"],
:root[data-momento="crepuscolo"][data-cielo="nuvoloso"] { --cielo: #c0567a; }

html { background: var(--fondo); }

body { color: var(--testo); background: none; }

/* La sfumatura del cielo: resta ferma in cima mentre il contenuto scorre */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cielo) var(--forza-cielo), var(--fondo)) 0,
    var(--fondo) 340px);
}

/* ---------- Superfici: riquadri piatti con bordo sottile ---------- */

.card, .dettaglio, .riquadro, .messaggio, .ricerca__campo, .pulsante-icona, .preferito, .indice button {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  box-shadow: none;
  color: var(--testo);
}
.dettaglio--piatto { background: var(--superficie-tenue); border-color: transparent; }
.messaggio--errore { background: var(--errore-sfondo); }

.segnaposto, .scheda__luogo { color: var(--tenue); }

/* La barra in alto copre il contenuto che le scorre sotto */
.barra-alta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cielo) var(--forza-cielo), var(--fondo)) 0,
    color-mix(in srgb, var(--cielo) calc(var(--forza-cielo) * 0.8), var(--fondo)) 70%,
    transparent);
  pointer-events: none;
}

/* Il preferito aperto usa il colore d'accento */
.preferito[aria-current="true"] {
  border-color: var(--accento);
  background: var(--accento);
  color: var(--accento-testo);
}

/* Un solo momento animato: il riquadro della temperatura che entra quando arrivano i dati.
   Solo un piccolo movimento, senza trasparenza: se le animazioni sono in pausa il testo si legge. */
@keyframes entra {
  from { transform: translateY(10px); }
  to { transform: none; }
}
.riquadro--temperatura { animation: entra 0.4s ease-out; }

/* Nel tema scuro anche la mappa diventa scura (le immagini di OpenStreetMap sono chiare) */
:root[data-tema="scuro"] .mappa-base,
:root[data-tema="scuro"] .anteprima-radar__mappa {
  filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.6);
}