/* =====================================================================
   Asse v3 · TOKEN DI SISTEMA
   Scala tipografica, spazi, layout, raggi, movimento, livelli.
   Colori, caratteri e ombre stanno in marca.css (caricare prima marca.css).

   Regole:
   - I componenti usano SOLO token: nessun valore letterale di colore,
     spazio, raggio, durata o curva fuori da questi due file.
   - Le uniche soglie di finestra sono 600 / 1024 / 1440 px (min-width).
     I componenti si adattano al proprio contenitore: layout intrinseco e,
     se serve, una sola soglia di contenitore: 480 px.
   ===================================================================== */

:root {
  /* ---------- Scala tipografica: per ruolo, non per misura ---------- */
  --fs-nota: 0.8125rem;                                    /* 13 · note, assi, etichette */
  --fs-secondario: 0.9375rem;                              /* 15 · contesto, chip, pulsanti compatti */
  --fs-corpo: 1.0625rem;                                   /* 17 · testo e pulsanti */
  --fs-titolo-3: 1.0625rem;                                /* 17 forte · titoli di gruppo e di foglio (v2: stessa misura del corpo, peso forte) */
  --fs-titolo-2: clamp(1.5rem, 1.32rem + 0.75vw, 1.875rem);   /* 24 → 30 · titoli di sezione */
  --fs-titolo-1: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);    /* 30 → 44 · titolo di pagina */
  --fs-protagonista: clamp(2.5rem, 1.6rem + 4vw, 5rem);       /* 40 → 80 · il titolo forte della schermata */
  --fs-numero: clamp(4.5rem, 3rem + 7vw, 9rem);               /* 72 → 144 · il numero forte della schermata */
  --fs-tempo: clamp(3.5rem, 12vh, 8rem);                      /* conto alla rovescia, leggibile a due metri */

  --lh-stretta: 1.05;   /* protagonista, numero, tempo */
  --lh-titoli: 1.2;
  --lh-testo: 1.5;

  --fw-leggero: 300;    /* solo tempo e numero */
  --fw-normale: 400;
  --fw-forte: 620;      /* titoli brevi, pulsanti, valori */

  --ls-protagonista: -0.02em;
  --ls-maiuscoletto: 0.06em;

  --testo-max: 68ch;    /* riga di lettura: 45–75 caratteri */

  /* ---------- Spazi (scala 4) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;
  --sp-11: 96px;
  --sp-12: 128px;

  /* ---------- Layout (valori del telefono; le classi più larghe li ridefiniscono sotto) ---------- */
  --margine: 16px;          /* margine laterale della pagina */
  --gutter: 16px;           /* distanza tra colonne */
  --spazio-gruppi: 32px;    /* distanza tra gruppi: lo spazio separa, non i bordi */
  --spazio-elementi: 12px;  /* distanza tra elementi dello stesso gruppo */

  --nav-h: 60px;            /* barra in basso (telefono) */
  --rail-w: 72px;           /* barra laterale compatta (tablet) */
  --sidebar-w: 240px;       /* barra laterale estesa (PC) */
  --colonna-2-w: 360px;     /* colonna secondaria (PC grande) */
  --contenuto-max: 1200px;  /* PC grande: 1440 (sotto) */
  --modulo-w: 400px;        /* larghezza dei moduli (accesso, codice) */
  --barra-azione-h: 72px;

  /* bersagli e comandi */
  --tocco-min: 44px;
  --h-comando-compatto: 40px;   /* solo con puntatore fine */
  --h-comando: 48px;
  --h-comando-grande: 56px;
  --tocco-primario: 72px;       /* riproduci / pausa */

  /* icone: tratto 1,75 su griglia 24 */
  --icona-s: 18px;
  --icona-m: 22px;
  --icona-l: 28px;

  /* aree sicure (viewport-fit=cover) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  /* ---------- Raggi: tre principali, più il piccolo e il tondo ---------- */
  --r-xs: 4px;        /* segni minimi: celle, tacche */
  --r-s: 8px;         /* etichette, miniature */
  --r-m: 12px;        /* comandi e campi */
  --r-l: 20px;        /* schede, tessere, palco in pagina */
  --r-xl: 28px;       /* fogli, scheda della pratica */
  --r-tondo: 999px;

  /* ---------- Movimento: tre gesti ---------- */
  --m-istante: 100ms;     /* risposta al tocco (premuto, hover) */
  --m-entrata: 200ms;     /* gesto 1 · comparsa */
  --m-passaggio: 320ms;   /* gesto 2 · cambio di pagina, fogli */
  --m-conferma: 600ms;    /* gesto 3 · anello che si riempie, segno di spunta */
  --m-scena: 600ms;       /* ritorno della camera 3D */
  --m-respiro: 4s;        /* una fase del respiro (inspira o espira) */
  --m-attesa: 3.2s;       /* ciclo delle attese che respirano */
  --salita: 8px;          /* spostamento della comparsa */
  --e-standard: cubic-bezier(0.2, 0, 0, 1);
  --e-entrata: cubic-bezier(0, 0, 0.2, 1);
  --e-uscita: cubic-bezier(0.4, 0, 1, 1);

  /* ---------- Materia ---------- */
  --sfocatura-barra: blur(20px) saturate(1.4);
  --filetto: 1px solid var(--c-bordo);
  --focus-anello: 0 0 0 2px var(--c-sfondo), 0 0 0 4px var(--c-focus);

  /* ---------- Livelli ---------- */
  --z-palco-comandi: 10;
  --z-barra: 30;
  --z-nav: 40;
  --z-foglio: 60;
  --z-riscontro: 80;
}

/* ---------- Classi di schermo: tablet · PC piccolo · PC grande ---------- */
@media (min-width: 600px) {
  :root {
    --margine: 32px;
    --gutter: 24px;
    --spazio-gruppi: 40px;
    --spazio-elementi: 16px;
  }
}
@media (min-width: 1024px) {
  :root {
    --margine: 40px;
    --gutter: 32px;
    --spazio-gruppi: 56px;
  }
}
@media (min-width: 1440px) {
  :root {
    --margine: 56px;
    --contenuto-max: 1440px;  /* schermi grandi composti, non stirati (UI-11) */
  }
}

/* ---------- Movimento ridotto: i tre gesti si spengono ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --m-istante: 1ms;
    --m-entrata: 1ms;
    --m-passaggio: 1ms;
    --m-conferma: 1ms;
    --m-scena: 1ms;
    --salita: 0px;
  }
}

/* ---------- Trasparenza ridotta o sfocatura assente: barre piene ---------- */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --c-barra: var(--c-sfondo);
    --sfocatura-barra: none;
  }
}