/* ===========================================
   TOKEN — la grammatica visiva del prodotto

   Sta in un foglio suo per lo stesso motivo di layers.css: un elenco di valori non e' una
   regola di stile, e tenerlo separato lo rende leggibile senza scorrere il CSS. Il colore
   resta in colors.css, che ha gia' i suoi tre livelli.

   Le scale escono dai picchi d'uso reali del progetto, non da una progressione geometrica:
   14px e' il corpo base perche' e' gia' la misura piu' scritta, non perche' sta bene in una
   formula. Chi aggiunge un gradino spieghi qui perche' quello che c'e' non bastava.

   Spec e conteggi: .claude/docs/specs/2026-09-23-design-tokens-design.md
   =========================================== */
:root {
  /* ===== CARATTERI =====
     Ventinove dichiarazioni font-family per tre famiglie, scritte in dodici modi diversi.
     Da qui in avanti si scrivono cosi'. */
  --k-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --k-font-display: 'Barlow Condensed', var(--k-font);
  --k-font-mono:    'Consolas', 'Lucida Console', 'Courier New', monospace;

  /* ===== TIPOGRAFIA =====
     Il pavimento e' 11px: sotto non si scende. Il codice ha 45 dichiarazioni a 9 e 10px,
     ma sono da correggere quando quei moduli si toccano, non misure autorizzate. */
  --k-text-2xs: 0.6875rem;  /* 11px — micro-etichette, badge, contatori */
  --k-text-xs:  0.75rem;    /* 12px — metadati, scadenze, note sotto un campo */
  --k-text-sm:  0.8125rem;  /* 13px — corpo denso: righe di tabella, liste lunghe */
  --k-text-md:  0.875rem;   /* 14px — CORPO BASE dell'applicazione */
  --k-text-lg:  0.9375rem;  /* 15px — bottoni, input, etichette di form */
  --k-text-xl:  1rem;       /* 16px — titolo di scheda, testo enfatizzato */
  --k-text-2xl: 1.25rem;    /* 20px — titolo di sezione */
  --k-text-3xl: 1.5rem;     /* 24px — titolo di pagina */
  --k-text-4xl: 2rem;       /* 32px — numeri di .stat-card, in --k-font-display */

  --k-leading-tight: 1.2;     /* titoli */
  --k-leading:       1.5;     /* corpo */
  --k-tight:         -0.02em; /* crenatura dei titoli */

  /* ===== SPAZIATURA =====
     Griglia da 4px, e il numero NEL NOME e' il moltiplicatore: --k-space-3 vale 3x4 = 12px.
     Si legge il valore dal nome senza ricordare a cosa corrisponde "md".
     Lo 0 resta 0: non serve un token per lo zero, e sono 127 dichiarazioni. */
  --k-space-1:  0.25rem;  /*  4px */
  --k-space-2:  0.5rem;   /*  8px */
  --k-space-3:  0.75rem;  /* 12px */
  --k-space-4:  1rem;     /* 16px */
  --k-space-5:  1.25rem;  /* 20px */
  --k-space-6:  1.5rem;   /* 24px */
  --k-space-8:  2rem;     /* 32px */
  --k-space-10: 2.5rem;   /* 40px */
  --k-space-12: 3rem;     /* 48px */
  /* ===== RAGGI =====
     Uno solo, piu' due forme. Il progetto aveva 49 valori distinti fra 2px e 24px, e
     guardandoli affiancati a grandezza vera 12, 14, 15 e 16px sono lo stesso arrotondamento:
     nessuno li aveva scelti, erano capitati. 8px perche' era gia' il piu' scritto (87 volte)
     e perche' regge sia il badge alto 22px sia la modale: a 12px un badge ha il raggio a piu'
     di meta' altezza e diventa una pillola, e allora --k-pill non vuol dire piu' niente.

     Cerchio e pillola restano perche' non sono gradini di una scala, sono forme: 50% fa un
     cerchio a qualunque dimensione, 999px una pillola a qualunque altezza. */
  --k-radius: 0.5rem;   /* 8px — tutto */
  --k-pill:   999px;    /*       bottoni, pillole, filtri, campi a pillola */
  --k-circle: 50%;      /*       avatar, pallini, bottoni tondi */


  /* ===== OMBRE =====
     124 ombre diverse per 212 usi: quasi una su misura ogni volta. Quattro elevazioni
     coprono tutto quello che il gestionale solleva davvero da terra.
     --k-shadow e' l'ombra delle card: e' quella che il codice usa, e vince su quella
     documentata a mano in product-design.md. */
  --k-shadow-xs: 0 1px 2px rgb(15 15 15 / 0.05);
  --k-shadow:    0 1px 2px rgb(15 15 15 / 0.04), 0 8px 24px rgb(15 15 15 / 0.06);
  --k-shadow-lg: 0 2px 4px rgb(15 15 15 / 0.04), 0 18px 50px rgb(15 15 15 / 0.10);
  --k-shadow-xl: 0 4px 8px rgb(15 15 15 / 0.06), 0 32px 80px rgb(15 15 15 / 0.16);

  /* ===== NEUTRI =====
     Alias: il valore sta una volta sola, in colors.css. Questi nomi restano perche' hanno 60
     punti di chiamata e dicono il mestiere (ink, muted, border) invece del gradino. */
  --k-ink:         var(--color-gray-900);
  --k-muted:       var(--color-gray-500);
  --k-muted-soft:  var(--color-gray-400);
  --k-border:      var(--color-gray-200);
  --k-border-soft: var(--color-gray-100);
  --k-surface:     var(--color-gray-50);
}