/* ============================================================
   EdilBoost — design system  ·  tokens
   «Un solo angolo, sempre in salita.»

   Fonte: sistema-visivo-edilboost-v2.html (21 ago 2026)
   43 token. Se un valore non è qui, è una scelta di composizione
   (livello B) e resta libera per definizione — vedi design-system.md §3.
   ============================================================ */

/* --- Gotham ------------------------------------------------ */
@font-face{font-family:Gotham;src:url(../font/Gotham-Book.otf)   format('opentype');font-weight:400;font-display:block}
@font-face{font-family:Gotham;src:url(../font/Gotham-Medium.otf) format('opentype');font-weight:500;font-display:block}
@font-face{font-family:Gotham;src:url(../font/Gotham-Bold.otf)   format('opentype');font-weight:700;font-display:block}
@font-face{font-family:Gotham;src:url(../font/Gotham-Black.otf)  format('opentype');font-weight:900;font-display:block}

:root{

  /* === 1 · COLORE — 14 token ============================== */

  /* Marca — 5. Il vocabolario del manuale, non si rinomina. */
  --rame:              #B9653E;   /* firma. Max 10% della superficie */
  --carbone:           #343B40;   /* testo sul chiaro, pannelli sullo scuro. Mai fondo pagina */
  --ardesia:           #162128;   /* fondo scuro. Mai testo */
  --ghiaccio:          #F5F5F5;   /* fondo chiaro, e testo sopra lo scuro */
  --bianco:            #FFFFFF;   /* superfici in rilievo sopra il ghiaccio */

  /* Stato del rame — 1. Non è un secondo rame: è lo stesso, premuto. */
  --rame-premuto:      #AD5D38;   /* hover e pressed. Bianco sopra: 4,77:1 */

  /* Grigi funzionali — 4 */
  --testo-corrente:    #CED3D6;   /* il corrente sullo scuro.   Su ardesia 10,85:1 */
  --etichetta-scura:   #A5ACB0;   /* occhielli su ardesia.      7,12:1 */
  --etichetta-chiara:  #5A6167;   /* occhielli su ghiaccio.     5,77:1 */
  --bordo:             #D5D8D5;   /* confine fra superfici, al posto dell'ombra */

  /* Stato UI — 4. Solo dentro l'interfaccia, mai in copertina o ADV.
     E mai da soli: uno stato non si comunica col colore soltanto. */
  --success:           #2F6B4F;
  --warning:           #8A5A00;
  --error:             #9E3B32;
  --info:              #315E78;


  /* === 2 · TIPOGRAFIA — 7 livelli ========================= */
  /* Gotham normale, mai Condensed: la larghezza è ciò che ci separa
     da EdilScout. Le misure web sono INTERVALLI — il display respira
     col formato. Fra web e slide il fattore resta ~1,5. */

  --font: Gotham, sans-serif;

  /* livello          peso  web-min  web-max  slide   leading  tracking */
  --display-1:         900;    /*  56      72      104     0.94    -.022em */
  --display-1-min:     56px;  --display-1-max: 72px;  --display-1-slide: 104px;
  --display-1-lh:      .94;   --display-1-ls:  -.022em;

  --display-2:         900;
  --display-2-min:     40px;  --display-2-max: 48px;  --display-2-slide: 68px;
  --display-2-lh:      1.02;  --display-2-ls:  -.026em;

  --titolo:            700;
  --titolo-min:        28px;  --titolo-max:    32px;  --titolo-slide:    42px;
  --titolo-lh:         1.12;  --titolo-ls:     -.02em;

  --lead:              400;
  --lead-size:         20px;  --lead-slide:    28px;
  --lead-lh:           1.52;  --lead-ls:       0;

  --corpo:             400;
  --corpo-size:        17px;  --corpo-slide:   23px;
  --corpo-lh:          1.6;   --corpo-ls:      0;

  --label:             500;
  --label-min:         12px;  --label-max:     14px;  --label-slide:     16px;
  --label-ls:          .15em;

  --cifra:             900;
  --cifra-size:        46px;  --cifra-slide:   88px;
  --cifra-lh:          1;     --cifra-ls:      -.032em;

  /* Regola dura, non un livello: sotto i 16px il browser mobile
     ingrandisce la pagina da solo. */
  --input-min:         16px;


  /* === 3 · SPAZIO — 9 valori, base 4 ====================== */
  /* I sette preferiti sono la scala vera. 4 e 12 servono ai
     ritocchi interni ai componenti. Fuori scala non si va. */

  --sp-4:    4px;    /* ritocco interno */
  --sp-8:    8px;
  --sp-12:  12px;    /* ritocco interno */
  --sp-16:  16px;
  --sp-24:  24px;
  --sp-32:  32px;    /* margine laterale minimo */
  --sp-48:  48px;
  --sp-64:  64px;
  --sp-96:  96px;


  /* === 4 · GEOMETRIA — 5 token + 1 formula =============== */
  /* 25° è l'invariante. Le dimensioni no. */

  --angolo:          25deg;
  --pendenza:        0.4663;   /* = tan 25°. Tutto il resto discende da qui */
  --smusso-corsa:    96px;     /* salita corrispondente: 44,77 */
  --retino-passo:    45.03;    /* perpendicolare */
  --retino-tratto:   1.12;

  /*  salita% = (0.4663 × larghezza) ÷ altezza × 100
      Su 380×400 dà 44,2992% — nel master c'è 44,2994%.
      È da qui che nasce ogni clip-path del sistema. */


  /* === 5 · SUPERFICIE, FOCUS, MOTION — 8 token =========== */

  --raggio:          0;                              /* sempre. Nessuna eccezione decorativa */
  --ombra:           none;                           /* l'elevazione è bordo, contrasto e spazio */
  --bordo-linea:     1px solid var(--bordo);
  --focus-ring:      0 0 0 3px var(--ghiaccio), 0 0 0 5px var(--carbone);
  --target-min:      44px;                           /* altezza utile interattiva. Utile fino a 48 */

  --durata-micro:    150ms;   /* cambio di stato netto, nessun bounce (120–180) */
  --durata-pannello: 220ms;   /* entrata coerente con direzione e gerarchia (180–280) */
  --durata-retta:    700ms;   /* la retta di spinta, una volta sola per sezione */
}

@media (prefers-reduced-motion: reduce){
  :root{ --durata-micro:0ms; --durata-pannello:0ms; --durata-retta:0ms; }
}