/* ============================================================
   TOKEN — sorgente unica di colori, misure, tempi.
   Rispecchia app/dati/config-design.json (layout "Energia · leggibilità Ghisa").
   Serve al primo paint: js/design.js rilegge il JSON e sovrascrive a runtime,
   così un restyling è una modifica di dati, non di codice.
   Nessun valore cromatico va scritto fuori da questo file.
   ============================================================ */

:root {
  /* --- tipografia --- */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --f-mega: 72px;
  --f-xxl: 56px;
  --f-xl: 34px;
  --f-l: 26px;
  --f-m: 20px;
  --f-b: 16px;
  --f-s: 14px;
  --f-xs: 12.5px;
  --f-eti: 11px;
  /* Micro-tipografia dei blocchetti operativi (serie×rip, RIR, tempo, recupero):
     un corpo dedicato evita che ogni componente inventi il proprio. */
  --f-metrica: 17px;
  --f-metrica-s: 14.5px;
  /* Terzo scalino: valori lunghi come «ISO 40-45 s» o «3×12-15/braccio».
     Senza di esso il testo usciva dalla cella e finiva sopra quella accanto. */
  --f-metrica-xs: 11.5px;
  --f-micro: 9.5px;
  --peso-normale: 500;
  --peso-medio: 700;
  --peso-forte: 800;

  /* --- raggi --- */
  --r-xs: 10px;
  --r-s: 16px;
  --r: 22px;
  --r-l: 28px;
  --r-pill: 999px;

  /* --- SISTEMA DI MOVIMENTO ---------------------------------------------
     Tre sole durate, usate ovunque. Averne tre e non dodici è ciò che fa
     sembrare l'app "un pezzo solo": due elementi diversi che rispondono allo
     stesso gesto si muovono per lo stesso tempo, quindi il gesto sembra uno.

       --t-tocco  → risposta al dito: pressione, colore, spunta      (170 ms)
       --t        → transizioni di stato: schermata, apertura card   (250 ms)
       --t-ampio  → percorsi lunghi: fogli, dialoghi, scorrimenti    (420 ms)

     I tre nomi semantici sono ALIAS dei tre valori storici, non nuovi numeri:
     dati/config-design.json continua a essere l'unica fonte delle durate (le
     scrive a runtime js/design.js) e cambiandole lì cambia tutta l'app, alias
     compresi. Se fossero valori a sé, l'app avrebbe due sistemi di tempi.

     Tre sole curve:
       --e        decelerata standard, per tutto ciò che entra o cambia stato
       --e-foglio la curva dei fogli nativi (parte forte, si posa lentissima)
       --e-molla  rimbalzo controllato, SOLO per i micro-feedback di conferma */
  --t-lampo: 110ms;
  --t-veloce: 170ms;
  --t: 250ms;
  --t-lento: 420ms;
  --t-molla: 320ms;
  --t-tocco: var(--t-veloce);
  --t-ampio: var(--t-lento);
  --e: cubic-bezier(.2, .8, .3, 1);
  --e-foglio: cubic-bezier(.32, .72, 0, 1);
  --e-molla: cubic-bezier(.34, 1.42, .5, 1);
  /* Quanto "affonda" un elemento sotto il dito. Un solo valore per tutta l'app:
     se ogni componente scegliesse il proprio, il tocco sembrerebbe incoerente. */
  --scala-tocco: .97;
  --scala-tocco-forte: .92;
  /* Per i bersagli LARGHI quanto la card (le righe dell'agenda del batch): su
     una riga di 354 px il 3% sono 10 px di scorciamento, che a fianco della
     riga sotto si legge come uno scarto e non come una pressione. */
  --scala-tocco-lieve: .992;
  /* Scorrimento fra giorni: uscita rapidissima, arrivo morbido (curva "decelerata"
     dei pager nativi). 200 ms è la soglia sotto la quale il cambio non sembra un caricamento. */
  --t-scorri: 200ms;
  --e-scorri: cubic-bezier(.17, .67, .26, 1);

  /* --- MOVIMENTO AMBIENTALE -----------------------------------------------
     Non è una transizione: è una deriva continua che non finisce mai e che non
     deve MAI attirare lo sguardo.

     Le BOLLE delle card gradiente non vivono più qui: hanno una fisica vera in
     js/bolle.js (posizione, velocità, rimbalzo sui bordi), perché un percorso
     scritto in `@keyframes` è sempre lo stesso giro e per non farsi riconoscere
     doveva essere così lento da risultare invisibile.
     Restano questi due token per l'unico movimento ambientale ancora in CSS:
     il respiro dell'alone dietro il numero delle kcal, che non si sposta di un
     pixel (sotto c'è un numero da leggere) e pulsa appena.
     Con `prefers-reduced-motion` la durata NON viene azzerata (un'animazione
     infinita da 1 ms sarebbe uno sfarfallio): il respiro si ferma del tutto,
     con la sua `@media` in css/componenti.css. */
  --t-bolla-c: 31s;
  --e-bolla: cubic-bezier(.45, .05, .55, .95);

  /* --- spaziature (scala unica: niente numeri arbitrari nei componenti) --- */
  --sp-1: 6px;
  --sp-2: 10px;
  --sp-3: 14px;
  --sp-4: 18px;
  --sp-5: 24px;

  /* --- misure --- */
  --tab-h: 68px;
  --max-w: 540px;
  --touch: 44px;
  --touch-comodo: 52px;
  --pager-gap: 16px;      /* respiro fra un giorno e l'altro durante il trascinamento */
  --cal-cella: 52px;      /* altezza minima delle celle del calendario mensile */
  /* Altezza FISSA di una riga di calendario. Non è un minimo: è la misura che
     la riga ha sempre, in ogni mese, con o senza etichetta della seduta. Basta
     per numero (14,5 px) + segno (6 px) + etichetta (8 px) con i loro spazi, e
     resta sopra i 44 px di area toccabile. Da qui nasce l'altezza dell'intero
     foglio del calendario: 6 righe × --cal-riga + 5 spazi, sempre uguale. */
  --cal-riga: 56px;

  /* --- ZONE SICURE DELLO SCHERMO (Dynamic Island, barra gesti) --------------
     L'app dichiara `viewport-fit=cover`: la pagina arriva davvero ai bordi
     fisici del telefono, orologio e indicatori di iOS compresi. Ogni elemento
     appiccicato in alto DEVE quindi partire sotto l'isola, altrimenti il suo
     contenuto finisce sotto l'orologio (testo su testo, illeggibile).

     Perché due variabili invece di scrivere env() ovunque:
     1. un solo punto di verità — chi aggiunge una barra domani scrive
        `var(--safe-top)` e non può dimenticarsi del fallback;
     2. si possono SIMULARE in prova: su desktop env() vale 0 e il difetto è
        invisibile, mentre forzando --safe-top a 59px (iPhone con isola) si
        verifica la geometria reale nel browser di sviluppo.
     Il fallback `0px` di env() vale per ogni browser che non conosce le zone
     sicure: lì la barra resta esattamente com'era. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}

/* ---------- TEMA SCURO (predefinito: palestra, sera) ---------- */
:root,
:root[data-tema="scuro"] {
  color-scheme: dark;

  --bg: #120B22;
  --bg-alone-1: rgba(255, 61, 127, .26);
  --bg-alone-2: rgba(123, 92, 255, .26);
  --sup: #1D1233;
  --sup-2: #251740;
  --sup-3: #2E1E4D;
  --sup-piatta: #171029;
  --velo: rgba(255, 255, 255, .06);
  --velo-2: rgba(255, 255, 255, .10);
  --bordo: rgba(255, 255, 255, .11);
  --bordo-forte: rgba(255, 255, 255, .20);

  --txt: #F6F1FF;
  --txt-2: #C3B5DE;
  --txt-3: #A091C0;
  --txt-inv: #170C28;

  --acc: #FF3D7F;
  --acc-txt: #FF7EA8;
  --acc-2: #7B5CFF;
  --acc-2-txt: #A992FF;
  --acc-3: #3DD6FF;
  --ambra: #FFB65C;
  --lime: #8BE85C;
  --ok: #2FD98A;
  --ok-txt: #5EE8A8;
  --allerta: #FFC46B;
  --errore: #FF7B7B;

  --grad-caldo: linear-gradient(135deg, #FF3D7F 0%, #FF9A3D 100%);
  --grad-freddo: linear-gradient(135deg, #7B5CFF 0%, #3DD6FF 100%);
  --grad-verde: linear-gradient(135deg, #2FD98A 0%, #8BE85C 100%);
  --grad-ambra: linear-gradient(135deg, #FF9A3D 0%, #FFD35C 100%);

  --ombra-card: 0 10px 30px -18px rgba(0, 0, 0, .8);
  --ombra-caldo: 0 18px 40px -16px rgba(255, 61, 127, .52);
  --ombra-freddo: 0 18px 40px -16px rgba(123, 92, 255, .52);
  --ombra-verde: 0 18px 40px -16px rgba(47, 217, 138, .45);
  --ombra-alta: 0 -10px 34px -12px rgba(0, 0, 0, .85);

  /* --- PROFONDITÀ: due livelli e una luce ---------------------------------
     Un'ombra sola, larga e morbida, appiattisce: su fondo scuro si vede appena
     e le superfici sembrano disegnate sullo stesso piano. Qui ogni livello ha
     DUE ombre — un contatto stretto (1-2 px, dice «appoggiato») e una diffusa
     (dice «quanto in alto») — che è il modo in cui la luce si comporta davvero.
     `--luce-alto` è il riflesso sul bordo superiore: una sfumatura che si spegne
     a metà della superficie. È ciò che dà lo spessore alle card senza aggiungere
     un solo pixel di bordo, e senza costare nulla in disegno.
     Restano token: cambiarli qui cambia tutta l'app, tema chiaro compreso. */
  --ombra-1: 0 1px 1px rgba(0, 0, 0, .30), 0 8px 22px -16px rgba(0, 0, 0, .75);
  --ombra-2: 0 2px 5px rgba(0, 0, 0, .26), 0 20px 44px -24px rgba(0, 0, 0, .85);
  --luce-alto: linear-gradient(180deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, 0) 46%);
  --bordo-luce: rgba(255, 255, 255, .16);

  --graf-griglia: rgba(255, 255, 255, .09);
  --graf-asse: #A091C0;
}

/* ---------- TEMA CHIARO (variante, contrasto AA verificato) ---------- */
:root[data-tema="chiaro"] {
  color-scheme: light;

  --bg: #F6F3FC;
  --bg-alone-1: rgba(255, 61, 127, .13);
  --bg-alone-2: rgba(123, 92, 255, .13);
  --sup: #FFFFFF;
  --sup-2: #F1EBFA;
  --sup-3: #E7DEF7;
  --sup-piatta: #FFFFFF;
  --velo: rgba(23, 12, 40, .045);
  --velo-2: rgba(23, 12, 40, .08);
  --bordo: rgba(23, 12, 40, .13);
  --bordo-forte: rgba(23, 12, 40, .26);

  --txt: #160C27;
  --txt-2: #4C3D66;
  --txt-3: #63537F;
  --txt-inv: #FFFFFF;

  --acc: #D81B60;
  --acc-txt: #B4144F;
  --acc-2: #5A38E8;
  --acc-2-txt: #4C2ACC;
  --acc-3: #0A7EA4;
  --ambra: #B26A00;
  --lime: #4A8F1E;
  --ok: #0E8A55;
  --ok-txt: #0B7247;
  --allerta: #9A6100;
  --errore: #C62828;

  --grad-caldo: linear-gradient(135deg, #E01B63 0%, #E86A12 100%);
  --grad-freddo: linear-gradient(135deg, #5A38E8 0%, #0FA5D8 100%);
  --grad-verde: linear-gradient(135deg, #0E9E60 0%, #5BB026 100%);
  --grad-ambra: linear-gradient(135deg, #E8801A 0%, #D9A400 100%);

  --ombra-card: 0 8px 24px -16px rgba(23, 12, 40, .35);
  --ombra-caldo: 0 16px 34px -18px rgba(216, 27, 96, .42);
  --ombra-freddo: 0 16px 34px -18px rgba(90, 56, 232, .40);
  --ombra-verde: 0 16px 34px -18px rgba(14, 138, 85, .38);
  --ombra-alta: 0 -8px 26px -14px rgba(23, 12, 40, .28);

  /* Sul chiaro la luce viene dall'alto e le superfici sono BIANCHE: un riflesso
     bianco non si vedrebbe. Il rilievo lo fa l'ombra di contatto, e la
     sfumatura in alto è appena scura per staccare la card dal fondo lilla. */
  --ombra-1: 0 1px 1px rgba(23, 12, 40, .07), 0 6px 18px -14px rgba(23, 12, 40, .32);
  --ombra-2: 0 2px 5px rgba(23, 12, 40, .09), 0 18px 38px -22px rgba(23, 12, 40, .38);
  --luce-alto: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 46%);
  --bordo-luce: rgba(23, 12, 40, .10);

  --graf-griglia: rgba(23, 12, 40, .11);
  --graf-asse: #63537F;
}

/* ---------- Accessibilità: nessuna animazione se il sistema la esclude ----------
   Azzerare i token spegne in un colpo solo ogni transizione dell'app, comprese
   quelle scritte nei componenti futuri: nessuno può "dimenticarsi" della regola.
   Le animazioni decorative (coriandoli, tracciamento delle linee) sono spente
   a parte, con la loro `@media`, perché non sono transizioni ma sequenze. */
@media (prefers-reduced-motion: reduce) {
  /* `!important` è indispensabile, non è pigrizia: js/design.js applica i token
     di dati/config-design.json come stile INLINE sulla radice, e uno stile
     inline batte qualunque regola di foglio di stile. Senza `!important` le
     durate del JSON (170/250/420 ms) resterebbero attive anche con la
     riduzione del movimento richiesta dal sistema — cioè esattamente il
     contrario di quanto il JSON stesso dichiara nelle proprie regole. */
  :root {
    --t-lampo: 1ms !important;
    --t-veloce: 1ms !important;
    --t: 1ms !important;
    --t-lento: 1ms !important;
    --t-molla: 1ms !important;
    --t-scorri: 1ms !important;
    --scala-tocco: 1 !important;
    --scala-tocco-forte: 1 !important;
    --scala-tocco-lieve: 1 !important;
  }
}