/* ==========================================================================
   Bea Lab — guida di stile (step 3.9)
   Fonte di verità del progetto. Nessun valore di colore, spazio o dimensione
   va scritto a mano nelle pagine: se non è qui, non esiste.

   DIREZIONE ATTIVA: "bottega di terra", ricavata dal design che Nicola ha
   portato il 10/08/2026 (`Designbealab.pdf`). Fondo avorio, verde bosco come
   colore pieno, terracotta come unico accento, titoli serif con il corsivo
   che porta la voce, etichette in monospaziato, forme arrotondate.

   Le direzioni precedenti restano in `_design/`:
   · serif editoriale ........ `versione-serif.html`          + `tokens-serif.css.bak`
   · flat alto contrasto ..... `versione-flat.html`           + `tokens-flat.css.bak`
   · bottega bianca (Erra) ... `versione-bottega-bianca.html` + `tokens-bottega-bianca.css.bak`
   · tempo lento (Ekadea) .... `versione-ekadea.html`         (token propri, dentro il file)
   ========================================================================== */

:root {

  /* --- COLORE ------------------------------------------------------------
     Campionata dal PDF, non stimata a occhio: i valori vengono dai pixel del
     mockup a 400 dpi.

     ATTENZIONE, nodo aperto per Beatrice: questa palette NON è quella del
     brand book. Il petrolio #015158 lascia il posto a un verde bosco e
     compare un terracotta che nel brand book non c'è. È una scelta di
     Nicola sul design nuovo, non una deriva: vedi domande-cliente n.16.   */

  --c-verde:         #1b3a2f;   /* il pieno: fasce, bottoni, titoli scuri   */
  --c-verde-2:       #23473a;   /* secondo piano dentro le fasce scure      */
  --c-terracotta:    #b96a44;   /* accento unico — corsivi, badge, segni    */
  --c-ocra:          #e8a55f;   /* solo dentro le illustrazioni             */

  --c-avorio:        #f6f1e8;   /* il fondo della pagina                    */
  --c-crema:         #efe4d3;   /* schede e fasce chiare                    */
  --c-beige:         #eae0cf;   /* fasce alterne                            */
  --c-beige-2:       #e3d7c2;   /* riquadri immagine, fondi illustrazione   */
  --c-terra:         #cbb492;   /* masse profonde nelle illustrazioni       */
  /* Campionato dentro il riquadro delle illustrazioni: serve ai contenitori
     che le ospitano, così il disegno non sembra un francobollo incollato su
     un altro foglio. Il bordo esterno delle illustrazioni è #f0ede4, cioè
     quasi il nostro avorio — per questo su fondo avorio spariscono da sole. */
  --c-illustrazione: #dbd0be;
  --c-sabbia:        #d8c5a8;   /* mezzo tono nelle illustrazioni           */

  --c-testo:         #26332c;   /* corpo su fondo chiaro                    */
  --c-testo-tenue:   #5c6a5f;   /* testo secondario                         */
  --c-testo-inv:     #f2ede2;   /* corpo su verde                           */
  --c-etichetta:     #7d8a76;   /* le etichette in monospaziato             */

  --c-bordo:         rgba(27, 58, 47, .16);
  --c-bordo-tenue:   rgba(27, 58, 47, .09);

  /* Contrasti verificati su fondo avorio #f6f1e8:
     verde ............... 11.9:1  AAA
     testo ............... 10.4:1  AAA
     testo-tenue .........  5.6:1  AA
     terracotta ..........  4.6:1  AA (solo ≥18px o grassetto)
     etichetta ...........  3.4:1  solo etichette ≥11px maiuscole spaziate  */


  /* --- TIPOGRAFIA --------------------------------------------------------
     Tre voci, ognuna con un mestiere:
     · Newsreader, serif, per i titoli. È la stessa che il cliente aveva
       scelto nella bozza "Tempo Lento", e il suo CORSIVO è il motivo per cui
       sta qui: nel design è il corsivo a portare la frase che conta.
     · Noto Sans, la font del brand book, per tutto il testo che si legge.
     · Noto Sans Mono per etichette e numeri di sezione — è quel dettaglio
       da scheda tecnica che tiene insieme tutto il design.                */

  --f-titolo: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-testo:  'Noto Sans', Arial, Helvetica, sans-serif;
  --f-mono:   'Noto Sans Mono', 'SFMono-Regular', Consolas, monospace;

  --fw-titolo: 400;
  --fw-corpo:  400;
  --fw-medio:  500;
  --fw-forte:  600;

  --t-display: clamp(38px, 4.8vw, 66px);
  --t-h2:      clamp(28px, 3.4vw, 46px);
  --t-h3:      clamp(19px, 1.5vw, 23px);
  --t-lead:    clamp(16px, 1.15vw, 18px);
  --t-corpo:   16px;
  --t-piccolo: 14.5px;
  --t-dato:    13px;
  --t-mono:    11.5px;

  --lh-display: 1.02;
  --lh-titolo:  1.1;
  --lh-corpo:   1.72;

  --ls-display: -.022em;
  --ls-titolo:  -.018em;
  --ls-mono:    .18em;

  --misura-lead:  46ch;
  --misura-corpo: 60ch;
  --misura-nota:  40ch;


  /* --- SPAZIO ------------------------------------------------------------ */

  --sp-1:  4px;   --sp-2:  8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;   --sp-6: 32px;   --sp-7: 44px;  --sp-8: 64px;
  --sp-9: 96px;   --sp-10:128px;

  --sez-y:       clamp(72px, 8vw, 128px);
  --sez-y-fitta: clamp(48px, 5vw, 80px);


  /* --- GRIGLIA ----------------------------------------------------------- */

  --barra-h:    98px;
  --grid-max:   1240px;
  --grid-pad:   clamp(20px, 4vw, 48px);
  --grid-gap:   clamp(18px, 2vw, 30px);


  /* --- FORMA -------------------------------------------------------------
     Qui cambia la regola più visibile delle direzioni precedenti: il flat a
     spigolo vivo lascia il posto a raggi generosi e bottoni a pillola. Non
     è un ripensamento — è quello che fa il design nuovo, e le forme tonde
     rimandano al tornio meglio di qualunque rettangolo.                    */

  --r-piccolo: 10px;
  --r-scheda:  16px;
  --r-grande:  22px;
  --r-pillola: 999px;

  --bordo:      1px solid var(--c-bordo);
  --bordo-fine: 1px solid var(--c-bordo-tenue);
  --ombra-alta: none;
  --ombra-bassa: none;


  /* --- MOVIMENTO --------------------------------------------------------- */

  --e-entrata:     cubic-bezier(.22, .61, .36, 1);
  --e-simmetrica:  cubic-bezier(.65, 0, .35, 1);
  --d-entrata:     820ms;
  --d-transizione: 600ms;
  --d-micro:       240ms;
  --shift-entrata: 16px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-entrata: 1ms; --d-transizione: 1ms; --d-micro: 1ms; --shift-entrata: 0px; }
}