/* ponte.css — collega il CSS già scritto dentro le pagine al nuovo design.

   PERCHÉ ESISTE
   Ogni pagina dell'app ha dentro di sé centinaia di righe di CSS proprio, scritte con
   i vecchi nomi dei colori (--cream, --deep-teal, --sand…). Riscrivere quelle righe una
   per una significherebbe rifare 32 pagine a mano, con l'alto rischio di rompere qualcosa.
   Qui invece ridefinisco quei NOMI puntandoli ai colori nuovi: il CSS delle pagine resta
   com'è e cambia aspetto da solo.

   IL TRUCCO DELLA PRECEDENZA
   Ogni pagina definisce i suoi colori dentro `:root{…}`, e quel blocco sta nel <style>
   della pagina, cioè DOPO questo file. A parità di forza vince l'ultimo scritto, quindi
   normalmente vincerebbe la pagina. Uso `html:root` che è un selettore più forte di
   `:root` (un elemento in più), così vinco sempre, indipendentemente dall'ordine.
   Se un giorno una pagina dovesse davvero tenersi il suo colore, le basta scriverlo con
   `html:root` a sua volta, oppure inline.

   COSA NON FA
   I colori scritti a mano dentro le pagine (per esempio #FFF7F3) non li tocca: quelli
   si sistemano pagina per pagina nella rifinitura. Va incluso DOPO ui.css.
*/

html:root{
  /* --- fondo e superfici --- */
  --cream:   #FBF9F5;   /* era #F4EFE6 — il fondo pagina, ora crema quasi bianco */
  --surface: #FFFFFF;   /* era #FBF8F2 — le card ora sono bianche piene */
  --page:    #F0EBE0;   /* era #ECE5D8 — i fondini dentro le card */

  /* --- testo ---
     --ink e --muted erano il testo principale e quello secondario.
     Attenzione: NON mando --muted sul grigio più chiaro (--ink-3): su bianco farebbe
     2,9:1 di contrasto, sotto il minimo leggibile. Va sul grigio medio. */
  --ink:   #11201F;
  --slate: #0A343B;     /* usato per i fondi scuri */
  --muted: #47585B;
  --sand:  #8B9695;     /* erano due grigi caldi decorativi: ora il grigio più tenue */
  --tan:   #8B9695;

  /* --- accenti --- */
  --deep-teal: #0D5C63; /* invariato: era già il petrolio del brand */
  --teal:      #12A08A;
  --mint:      #E7F3F1;
  --teal-soft: #E7F3F1;
  --coral:     #FF7A52;

  /* --- linee --- */
  --line: #ECE6DA;
}

/* ============================================================
   Font: i titoli passano da Newsreader (serif) a Outfit.
   Nelle pagine il font è scritto per esteso, quindi la sostituzione vera l'ho fatta
   nel testo delle pagine; queste due righe servono solo da rete se qualche punto
   fosse rimasto indietro.
   ============================================================ */
body{ font-family:'Hanken Grotesk',system-ui,sans-serif; }
h1,h2,h3,h4{ font-family:'Outfit',system-ui,sans-serif; letter-spacing:-.01em; }

/* ============================================================
   Ritocchi ai mattoni vecchi più usati.
   Sono scritti in modo DEBOLE (un solo nome di classe): se una pagina ha una sua regola
   sullo stesso elemento, vince la pagina. Così questo file migliora ciò che trova
   senza mai stravolgere una schermata che funzionava.
   ============================================================ */

/* ---------- barra in basso: icone ufficiali del brand ----------
   La barra delle pagine vere si chiama .nav (è scritta dentro ogni pagina), mentre
   quella costruita da telaio.js si chiama .tl-tab. Le regole stanno qui perché ponte.css
   è l'unico foglio che TUTTE le pagine caricano.
   Le icone sono la versione SCURA: questa barra è bianca. Lo stato si legge dall'opacità,
   perché un PNG non si può ricolorare, più il colore del testo che resta petrolio. */
.nav .wh-bi{ width:26px; height:26px; opacity:.6; transition:opacity .15s; }
.nav a.active .wh-bi{ opacity:1; }
.nav a:active .wh-bi{ opacity:1; }

/* bottoni */
.btn, .btn-primary, .save, .go{ font-family:'Hanken Grotesk',system-ui,sans-serif; }
.btn-primary{ border-radius:999px; }

/* campi dei moduli: 47 usi in giro, vale la pena uniformarli */
.fld{ border-radius:14px; }
.fld:focus, .in:focus{ outline:none; }

/* stati vuoti */
.empty{ border-radius:14px; }

/* la freccia "indietro" in cima alle sotto-pagine */
.back{ border-radius:10px; }