/* =====================================================================
   Filippi Design Kit · TOKEN — i MATERIALI
   Principio «Dato vivo»: ogni forma e ogni movimento mostra un dato.
   Grammatica: token = materiali · componenti = nomi · animazioni = verbi.
   ===================================================================== */

:root {
  /* ---------- Inchiostri: il testo ---------- */
  --fd-inchiostro:   #4C5356;  /* titoli, valori, nomi                 */
  --fd-matita:       #80868B;  /* sommari, descrizioni                 */
  --fd-grafite:      #A5ABB6;  /* occhielli neutri, etichette          */

  /* ---------- Spento: ciò che non è attivo ---------- */
  --fd-spento:        #9AA0A6;  /* testo di un elemento spento         */
  --fd-spento-icona:  #8F969C;  /* icona spenta                        */
  --fd-spento-segno:  #B6BCC3;  /* glifi SVG spenti                    */
  --fd-spento-rgb:    200,205,212;

  /* ---------- Carte: le superfici ---------- */
  --fd-tavolo:     #EEF1F4;  /* fondo pagina                           */
  --fd-foglio:     #FFFFFF;  /* fondo scheda                           */
  --fd-carta:      #F4F6F8;  /* dati, interruttori, tessere            */
  --fd-pozzetto:   #E6E9EE;  /* incavo dell'icona spenta               */
  --fd-solco:      #E3E6EA;  /* binari di regoli, quadranti, tacche    */
  --fd-punto:      #C3C8CE;  /* separatori a pallino                   */
  --fd-tratteggio: #CFD6DE;  /* bordo del segnale MUTO                 */
  --fd-filo:       rgba(0,0,0,.06);  /* bordo sottile                  */
  --fd-vinile:     #1F1F24;  /* disco della riproduzione               */

  /* ---------- Oro: il colore caldo del brand ---------- */
  --fd-oro:          #FFC400;  /* fondi, nastri, acceso                */
  --fd-oro-filo:     #E0A800;  /* linee dei grafici                    */
  --fd-oro-brunito:  #B58900;  /* testo oro su chiaro                  */
  --fd-oro-riflesso: #FFD54F;  /* riflesso luminoso                    */
  --fd-oro-rgb:      255,196,0;

  /* ---------- Segnali: colori con un significato ---------- */
  --fd-allerta:     #E30613;  /* critico, calore, aperto, assente      */
  --fd-attenzione:  #F18E00;  /* SOLO soglie di avviso e intensità     */
  --fd-flusso:      #00A9E0;  /* freddo, energia, acqua                */
  --fd-regolare:    #43A047;  /* tutto in ordine                       */
  --fd-aria:        #26C6DA;  /* movimento d'aria, rotazioni           */
  --fd-voce:        #8B5CF6;  /* suono, media in riproduzione          */
  --fd-allerta-rgb:  227,6,19;
  --fd-flusso-rgb:   0,169,224;
  --fd-regolare-rgb: 67,160,71;
  --fd-aria-rgb:     38,198,218;
  --fd-voce-rgb:     139,92,246;

  /* ---------- Accenti: uno per scheda, mai due vicine uguali ---------- */
  --fd-acc-turchese: #26C6DA;
  --fd-acc-oro:      #FFC400;
  --fd-acc-lavanda:  #7F77DD;
  --fd-acc-prato:    #43A047;
  --fd-acc-indaco:   #5C6BC0;
  --fd-acc-cielo:    #00A9E0;
  --fd-acc-rosa:     #EC407A;
  --fd-acc-smeraldo: #1D9E75;

  /* ---------- Gradienti dei comandi ---------- */
  --fd-grad-fuoco: linear-gradient(135deg, #E30613, #EC407A);
  --fd-grad-notte: linear-gradient(135deg, #8B5CF6, #3F51B5);
  --fd-grad-mare:  linear-gradient(135deg, #1D9E75, #26C6DA);

  /* ---------- Scala d'intensità: da freddo a caldo, per qualsiasi grandezza ---------- */
  --fd-int-1: #00A9E0;  /* 0     (es. ≤18 °C)  */
  --fd-int-2: #43A047;  /* 0,33  (es. 22 °C)   */
  --fd-int-3: #FFD400;  /* 0,58  (es. 25 °C)   */
  --fd-int-4: #F18E00;  /* 0,79  (es. 27,5 °C) */
  --fd-int-5: #E30613;  /* 1     (es. ≥30 °C)  */
  --fd-scala-intensita: linear-gradient(90deg, var(--fd-int-1) 0%, var(--fd-int-2) 33%, var(--fd-int-3) 58%, var(--fd-int-4) 79%, var(--fd-int-5) 100%);

  /* ---------- Caratteri ---------- */
  /* Default di sistema; la coppia del brand si sceglie nella vetrina (sezione Caratteri). */
  --fd-font-testo:  Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fd-font-titoli: var(--fd-font-testo);
  --fd-font-dati:   var(--fd-font-testo);   /* cifre: sempre tabular-nums */
  --fd-fs-apertura:  24px;   /* titolo d'apertura           */
  --fd-fs-numero:    30px;   /* numero protagonista         */
  --fd-fs-valore:    22px;   /* valore di un dato           */
  --fd-fs-titolo:    19px;   /* titolo di scheda            */
  --fd-fs-cifra:     15px;   /* misure, indicatori          */
  --fd-fs-nome:      13px;   /* nome di un interruttore     */
  --fd-fs-sommario:  12.5px; /* sommari, letture            */
  --fd-fs-etichetta: 11px;   /* etichette, stati            */
  --fd-fs-occhiello: 10.5px; /* occhiello MAIUSCOLO         */
  --fd-fw-regular: 400;
  --fd-fw-medium:  600;
  --fd-fw-bold:    700;
  --fd-fw-black:   800;
  --fd-ls-occhiello: 1.2px;

  /* ---------- Raggi ---------- */
  --fd-r-scheda:  22px;
  --fd-r-comando: 18px;
  --fd-r-dato:    16px;
  --fd-r-tessera: 14px;
  --fd-r-icona:   12px;
  --fd-r-stato:   10px;
  --fd-r-pill:    999px;

  /* ---------- Spazi ---------- */
  --fd-s1: 4px; --fd-s2: 6px; --fd-s3: 8px; --fd-s4: 10px;
  --fd-s5: 12px; --fd-s6: 14px; --fd-s7: 16px; --fd-s8: 18px;

  /* ---------- Ombre e bagliori ---------- */
  --fd-ombra-scheda: 0 2px 12px rgba(0,0,0,.07);
  --fd-ombra-disco:  0 2px 6px rgba(0,0,0,.18);
  /* bagliore colorato di ciò che è acceso: legge --c (tripletta RGB) */
  --fd-bagliore:        0 10px 22px -10px rgba(var(--c, var(--fd-oro-rgb)), .9);
  --fd-bagliore-scheda: 0 16px 32px -16px rgba(var(--c, var(--fd-oro-rgb)), .8), 0 2px 10px rgba(0,0,0,.06);

  /* ---------- Movimento ---------- */
  --fd-ease-out:  cubic-bezier(.2,.8,.2,1);  /* arrivi, riempimenti    */
  --fd-ease-draw: cubic-bezier(.4,0,.2,1);   /* linee che si tracciano */
  --fd-t-pressione:   .18s;
  --fd-t-colore:      .4s;
  --fd-t-ingresso:    .5s;
  --fd-t-scheda:      .6s;
  --fd-t-riempimento: 1.2s;
  --fd-cascata:       55ms;  /* ritardo tra elementi in sequenza */

  /* ---------- Nastro: il filo d'accento in cima alla scheda ---------- */
  --fd-nastro: 5px;

  color-scheme: light;
}

/* ---------- Tema scuro ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fd-inchiostro: #E7EAED; --fd-matita: #A3AAB1; --fd-grafite: #7F8790; --fd-spento: #7A828A;
    --fd-spento-icona: #7A828A; --fd-spento-segno: #5E656C; --fd-punto: #4A5056; --fd-tratteggio: #5A626B;
    --fd-solco: #33383D; --fd-pozzetto: #30353A; --fd-carta: #24282C; --fd-foglio: #1A1D20;
    --fd-tavolo: #111315; --fd-filo: rgba(255,255,255,.07);
    --fd-oro-brunito: #FFC400;
    --fd-ombra-scheda: 0 2px 14px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fd-inchiostro: #E7EAED; --fd-matita: #A3AAB1; --fd-grafite: #7F8790; --fd-spento: #7A828A;
  --fd-spento-icona: #7A828A; --fd-spento-segno: #5E656C; --fd-punto: #4A5056; --fd-tratteggio: #5A626B;
  --fd-solco: #33383D; --fd-pozzetto: #30353A; --fd-carta: #24282C; --fd-foglio: #1A1D20;
  --fd-tavolo: #111315; --fd-filo: rgba(255,255,255,.07);
  --fd-oro-brunito: #FFC400;
  --fd-ombra-scheda: 0 2px 14px rgba(0,0,0,.45);
  color-scheme: dark;
}