/* ============================================================================
   I TOKEN — la sede unica dei numeri e dei colori dell'area riservata.
   ============================================================================

   PERCHE' STA IN UN FILE SUO (20/09/2026, misurato).

   `index.php` — la PORTA dell'area, la prima pagina che vede un investitore —
   usa `var(--c-rosso)` e compagnia DICIASSETTE volte, e non caricava
   `area.css`: carica `mobile.css` e i fogli del sito pubblico. Diciassette
   variabili che non esistevano, e una in particolare stava sul pulsante
   «Accedi»: `background: var(--c-rosso)` senza ripiego non e' rosso, e'
   NIENTE. Il pulsante era bianco su bianco, e nessuna prova lo vedeva perche'
   il markup era giusto e il testo c'era.

   Caricare `area.css` intera li' non si poteva: porta con se' `main { padding
   }` e `.container-x`, che sulla pagina pubblica spostano la fascia d'ingresso
   e litigano con `site-header.css`. I token invece non contengono nessun
   selettore che disegni qualcosa: si possono caricare ovunque.

   TRE SEDI LO COLLEGANO, tutte con la chiave di cache presa dal file:
   `includes/guscio.php` (tutte le pagine da dentro), `recover.php` e
   `index.php`. Chi aggiunge una pagina che usa `var(--c-...)` lo collega, o
   le sue variabili valgono la stringa vuota.
   ========================================================================= */

:root {
  /* --- Colore. Dodici gradini, ruoli fissi. Presi dal CSS del sito, non
         inventati: il rosso e' rgb(180 1 1), l'inchiostro #111. ---------- */
  --c-carta:      #FFFFFF;   /* 1  il fondo della pagina                   */
  --c-carta-2:    #FAFAF9;   /* 2  il fondo di una fascia, mai di una card */
  --c-velo:       #F4F4F3;   /* 3  fondo di un campo a riposo              */
  --c-velo-2:     #EDEDEC;   /* 4  hover                                   */
  --c-velo-3:     #E4E4E2;   /* 5  attivo                                  */
  --c-filo:       #E6E6E4;   /* 6  il filetto: separa quasi tutto          */
  --c-filo-2:     #D2D2CF;   /* 7  bordo di un elemento                    */
  --c-filo-3:     #A8A8A4;   /* 8  bordo forte                             */
  --c-rosso:      #B40101;   /* 9  il picco: azione e posizione            */
  --c-rosso-2:    #8F0101;   /* 10 hover dell'azione                       */
  /* Il rosso SUL NERO della barra (#0A0A0A). --c-rosso li' fa 2,78:1: non
     regge ne' come testo (4,5) ne' come filetto (3,0). Questo e' il primo
     della stessa tinta che regge: 4,64:1. Vale SOLO sul fondo scuro. */
  --c-rosso-su-nero: #F60101;
  --c-grigio:     #62625E;   /* 11 testo a basso contrasto (5,9:1)         */
  --c-inchiostro: #14140F;   /* 12 testo ad alto contrasto                 */

  /* Tre soli colori di servizio, e nessuno di loro riempie mai una forma. */
  --c-ok:      #15633B;
  --c-attesa:  #8A5A00;
  --c-guasto:  #97160F;
  /* L'UNICA eccezione alla regola qui sopra: il fondo del segno «da fare»
     (Francesco, 20/09: «un punto di domanda giallo»). Un giallo vero su
     bianco fa 1,82:1 e come testo non si legge: per questo RIEMPIE un
     triangolo, col bordo in --c-attesa (5,93:1) e il glifo in inchiostro
     (10,16:1). Non e' un colore di testo e non lo diventa. */
  --c-giallo:  #F2B705;

  /* --- Spazio. Scala a stacco 25% minimo. ------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* --- Tipo. Gli stessi gradini di css/kw-leggibilita.css: la scala del
         sito e' gia' misurata, non se ne apre una seconda. ---------------- */
  --t-occhiello: 0.6875rem;  /* 11px */
  --t-didascalia: 0.75rem;   /* 12px */
  --t-piccolo:   0.875rem;   /* 14px */
  --t-corpo:     1rem;       /* 16px */
  --t-attacco:   1.125rem;   /* 18px */
  --t-h3:        1.25rem;    /* 20px */
  --t-h2:        1.5rem;     /* 24px */
  --t-h1:        1.875rem;   /* 30px */
  --t-cifra:     2.25rem;    /* 36px */
  --t-cifra-g:   3rem;       /* 48px */

  /* --- La misura. In `ch`, come nel sito: cambia col carattere. --------- */
  --misura:      66ch;
  --misura-lead: 60ch;

  /* --- Geometria. Il raggio e' DECISO: zero. Un dossier non ha angoli
         stondati, e 0.5rem intatto e' l'impronta di un componente non
         toccato. L'unica eccezione e' il pallino di stato, che e' un
         cerchio perche' e' un cerchio. --------------------------------- */
  --raggio: 0;
  --corsia: 180px;           /* la corsia delle etichette */
  --colonna: 1320px;         /* la larghezza massima del contenuto */
  --filetto: 1px;
}