/* ============================================================================
 * tokens.css — il vocabolario visivo di Traffic Law
 * ============================================================================
 *
 * Questo file non disegna niente. Dichiara soltanto dei nomi.
 *
 * È l'unico posto in cui esistono i valori: colori, spaziature, dimensioni del
 * testo, raggi, ombre, durate. Chiunque scriva interfaccia da qui in avanti usa
 * un nome, mai un valore. Cambiare il blu dell'applicazione deve essere una
 * riga in questo file, non 239 sostituzioni sparse in 550 pagine.
 *
 * ── Perché è organizzato su due livelli ─────────────────────────────────────
 *
 *   PRIMITIVI   --tl-blue-600, --tl-gray-100 …
 *               La tavolozza. Dicono *che colore è*. Non si usano quasi mai
 *               direttamente nei componenti.
 *
 *   SEMANTICI   --tl-accent, --tl-surface, --tl-text …
 *               Dicono *a cosa serve*. Sono questi che i componenti usano.
 *               Puntano ai primitivi.
 *
 * Il doppio livello serve a una cosa sola, ma importante: il giorno in cui
 * servirà un tema scuro, o il tema di un altro ente, si riscrive il blocco dei
 * semantici e basta. I componenti non si toccano. È anche il motivo per cui
 * questo file sopravvive a una migrazione verso Laravel o Filament: sono
 * variabili CSS native, e Tailwind — su cui Filament è costruito — si configura
 * esattamente a partire da queste.
 *
 * ── Regole ──────────────────────────────────────────────────────────────────
 *
 *   1. Nessun esadecimale fuori da questo file.
 *   2. Un token nuovo si aggiunge solo se il valore serve in più di un posto.
 *   3. I primitivi non si usano nei componenti: si usano i semantici. Se manca
 *      il semantico giusto, si aggiunge qui — non si scavalca il livello.
 *
 * I valori dei colori dell'applicazione non sono inventati: vengono dal censimento
 * dei 61 colori realmente presenti nel PHP. Il blu #294a9c (239 occorrenze) è
 * diventato --tl-blue-600, il grigio di sfondo #e7e7e7 è --tl-gray-150.
 * I colori di stato invece sono stati *sostituiti*, non ripresi: quelli storici
 * (#a94442, #3c763d, #928703, ereditati da Bootstrap 3) non superano la soglia
 * di contrasto WCAG AA su fondo bianco. Qui ci sono gli equivalenti conformi.
 *
 * Requisiti: browser con supporto a color-mix() — Chrome 111+, Safari 16.2+,
 * Firefox 113+ (2023). È il vincolo concordato.
 * ========================================================================= */

:root {
  /* ══════════════════════════════════════════════════════════ PRIMITIVI ══ */

  /* ── Blu istituzionale ────────────────────────────────────────────────────
   * Costruito attorno a #294a9c, il blu realmente dominante nel codice.       */
  --tl-blue-50:  #eef2fb;
  --tl-blue-100: #dce5f7;
  --tl-blue-200: #b9caef;
  --tl-blue-300: #8ea9e3;
  --tl-blue-400: #6284d3;
  --tl-blue-500: #3f63bd;
  --tl-blue-600: #294a9c;  /* ← il blu del progetto, 239 occorrenze nel PHP   */
  --tl-blue-700: #223c7f;
  --tl-blue-800: #1c3164;
  --tl-blue-900: #16264c;

  /* ── Azzurro della barra di navigazione ───────────────────────────────────
   * rgb(38,132,177) = #2684b1, il colore di .FN_Menu e .FN_Title.
   * Tenuto separato dal blu perché identifica la navigazione, non le azioni.  */
  --tl-teal-50:  #eaf4f9;
  --tl-teal-100: #d2e8f1;
  --tl-teal-300: #7cbcd8;
  --tl-teal-500: #2684b1;  /* ← il colore storico della navbar               */
  --tl-teal-600: #1f6b90;
  --tl-teal-700: #185470;
  --tl-teal-800: #123f54;
  --tl-teal-900: #0d2d3d;

  /* ── Neutri ───────────────────────────────────────────────────────────────
   * Leggermente freddi, per stare bene accanto al blu. --tl-gray-150 è il
   * vecchio #e7e7e7 dello sfondo, tenuto per continuità visiva.               */
  --tl-white:    #ffffff;
  --tl-gray-50:  #f7f8fa;
  --tl-gray-100: #eef0f4;
  --tl-gray-150: #e7e9ee;  /* ← lo sfondo storico #e7e7e7, riallineato       */
  --tl-gray-200: #dcdfe6;
  --tl-gray-300: #c3c8d2;
  --tl-gray-400: #9aa1af;
  --tl-gray-500: #737b8a;
  --tl-gray-600: #565e6c;
  --tl-gray-700: #414854;
  --tl-gray-800: #2b313b;
  --tl-gray-900: #1a1f27;
  --tl-black:    #0d1013;

  /* ── Colori di segnalazione ───────────────────────────────────────────────
   * Tutti verificati ≥ 4.5:1 su bianco (WCAG AA per testo normale).
   * Fra parentesi il valore storico che sostituiscono e il suo contrasto.     */
  --tl-green-600:  #15803d;  /* successo  (era #3c763d, 4.4:1 — sotto soglia) */
  --tl-amber-700:  #b45309;  /* attesa    (era #928703, 4.3:1 — sotto soglia) */
  --tl-red-700:    #b91c1c;  /* errore    (era #a94442, 4.7:1 — al limite)    */
  --tl-cyan-700:   #0e7490;  /* informazione                                  */
  --tl-purple-700: #6d28d9;  /* stato speciale (era #800080)                  */

  /* ══════════════════════════════════════════════════════════ SEMANTICI ══ */

  /* ── Superfici ────────────────────────────────────────────────────────── */
  --tl-surface:          var(--tl-white);      /* pannelli, schede, righe     */
  --tl-surface-sunken:   var(--tl-gray-100);   /* lo sfondo sotto ai pannelli */
  --tl-surface-raised:   var(--tl-white);      /* menu a tendina, popover     */
  --tl-surface-muted:    var(--tl-gray-50);    /* righe alterne, celle spente */
  --tl-surface-inverse:  var(--tl-gray-900);   /* tooltip, barre scure        */

  /* ── Testo ────────────────────────────────────────────────────────────── */
  --tl-text:             var(--tl-gray-900);   /* il testo normale            */
  --tl-text-muted:       var(--tl-gray-600);   /* etichette, testo di aiuto   */
  --tl-text-subtle:      #656d7b;   /* metadati, segnaposto        */
  --tl-text-inverse:     var(--tl-white);      /* su fondo scuro o colorato   */
  --tl-text-link:        var(--tl-blue-600);
  --tl-text-link-hover:  var(--tl-blue-800);

  /* ── Bordi ────────────────────────────────────────────────────────────── */
  --tl-border:           var(--tl-gray-200);   /* il bordo normale            */
  --tl-border-strong:    var(--tl-gray-300);   /* separatori che devono farsi vedere */
  --tl-border-subtle:    var(--tl-gray-100);   /* righe interne alle tabelle  */

  /* ── Accento: il colore delle azioni ──────────────────────────────────── */
  --tl-accent:           var(--tl-blue-600);
  --tl-accent-hover:     var(--tl-blue-700);
  --tl-accent-active:    var(--tl-blue-800);
  --tl-accent-subtle:    var(--tl-blue-50);    /* fondo di una pastiglia      */
  --tl-accent-text:      var(--tl-blue-700);   /* testo su fondo subtle       */
  --tl-on-accent:        var(--tl-white);      /* testo sopra l'accento pieno */

  /* ── Navigazione ──────────────────────────────────────────────────────── */
  --tl-nav-bg:           var(--tl-teal-800);
  --tl-nav-bg-hover:     var(--tl-teal-700);
  --tl-nav-bg-active:    var(--tl-teal-600);
  --tl-nav-text:         #dbe9f0;
  --tl-nav-text-strong:  var(--tl-white);
  --tl-nav-border:       var(--tl-teal-700);

  /* ── Stati semantici ──────────────────────────────────────────────────────
   * Ognuno ha tre facce: il colore pieno (--x), il fondo tenue (--x-subtle)
   * e il testo da usarci sopra (--x-text). Serve per avere pastiglie
   * leggibili senza calcolare il contrasto ogni volta.                        */
  --tl-success:          var(--tl-green-600);
  --tl-success-subtle:   color-mix(in srgb, var(--tl-green-600) 10%, white);
  --tl-success-text:     #14532d;

  --tl-warning:          var(--tl-amber-700);
  --tl-warning-subtle:   color-mix(in srgb, var(--tl-amber-700) 12%, white);
  --tl-warning-text:     #78350f;

  --tl-danger:           var(--tl-red-700);
  --tl-danger-subtle:    color-mix(in srgb, var(--tl-red-700) 10%, white);
  --tl-danger-text:      #7f1d1d;

  --tl-info:             var(--tl-cyan-700);
  --tl-info-subtle:      color-mix(in srgb, var(--tl-cyan-700) 10%, white);
  --tl-info-text:        #164e63;

  --tl-neutral:          var(--tl-gray-500);
  --tl-neutral-subtle:   var(--tl-gray-100);
  --tl-neutral-text:     var(--tl-gray-700);

  --tl-special:          var(--tl-purple-700);
  --tl-special-subtle:   color-mix(in srgb, var(--tl-purple-700) 10%, white);
  --tl-special-text:     #4c1d95;

  /* ── Spaziature ───────────────────────────────────────────────────────────
   * Scala a passo 4px. Non esistono valori intermedi: se serve 10px, o è 8 o
   * è 12. È il vincolo che tiene allineate le pagine scritte da persone diverse.
   *
   * ⚠ IN PIXEL, NON IN REM, E LA RAGIONE VA CONOSCIUTA.
   *
   * bootstrap.css riga 1080 dichiara `html { font-size: 10px }`. In questo
   * progetto 1rem vale 10px, non 16px — per questo il CSS storico è pieno di
   * valori come 1.1rem e 3rem, che sono 11px e 30px.
   *
   * Una scala in rem qui verrebbe fuori al 62,5% della misura prevista, e — cosa
   * peggiore — il giorno in cui qualcuno togliesse quella riga di Bootstrap
   * tutte le misure salterebbero del 60% in una volta sola, su tutte le pagine.
   * In pixel il valore significa la stessa cosa prima e dopo quella pulizia.
   *
   * Quando il progetto avrà una sola versione di Bootstrap e una radice a 16px,
   * riportare la scala in rem è la modifica di questo blocco e di nient'altro.  */
  --tl-space-0:  0;
  --tl-space-1:  4px;
  --tl-space-2:  8px;
  --tl-space-3:  12px;
  --tl-space-4:  16px;
  --tl-space-5:  24px;
  --tl-space-6:  32px;
  --tl-space-7:  48px;
  --tl-space-8:  64px;

  /* ── Testo ────────────────────────────────────────────────────────────────
   * 14px come misura di base: è la dimensione giusta per il lavoro d'ufficio
   * su elenchi lunghi. Oggi molte pagine scendono a 11-12px, che è il motivo
   * per cui si legge male anche quando il contrasto è a norma.                */
  /* system-ui non è in testa di proposito: su alcune configurazioni Linux si
   * risolve in un carattere inatteso, e l'interfaccia cambia aspetto a seconda
   * della macchina. Elencare i nomi veri dà lo stesso risultato su Windows
   * (Segoe UI) e macOS (San Francisco) senza sorprese altrove. */
  --tl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --tl-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* In pixel per la stessa ragione delle spaziature: vedi la nota lì sopra. */
  --tl-text-xs:   12px;   /* solo metadati e note                             */
  --tl-text-sm:   13px;   /* celle dense, etichette                           */
  --tl-text-base: 14px;   /* la misura normale                                */
  --tl-text-lg:   16px;   /* sottotitoli                                      */
  --tl-text-xl:   20px;   /* titolo di sezione                                */
  --tl-text-2xl:  24px;   /* titolo di pagina                                 */

  --tl-leading-tight:  1.25;
  --tl-leading-normal: 1.5;
  --tl-leading-loose:  1.7;

  --tl-weight-normal:   400;
  --tl-weight-medium:   500;
  --tl-weight-semibold: 600;
  --tl-weight-bold:     700;

  /* ── Raggi ────────────────────────────────────────────────────────────── */
  --tl-radius-sm:   3px;
  --tl-radius:      5px;
  --tl-radius-lg:   8px;
  --tl-radius-xl:   12px;
  --tl-radius-full: 999px;

  /* ── Ombre ────────────────────────────────────────────────────────────────
   * Tre livelli e basta: appoggiato, sollevato, in primo piano.               */
  --tl-shadow-sm: 0 1px 2px rgb(13 16 19 / 0.06);
  --tl-shadow:    0 1px 3px rgb(13 16 19 / 0.10), 0 1px 2px rgb(13 16 19 / 0.06);
  --tl-shadow-lg: 0 10px 20px rgb(13 16 19 / 0.12), 0 3px 6px rgb(13 16 19 / 0.08);

  /* ── Anello di messa a fuoco ──────────────────────────────────────────────
   * Un solo anello per tutta l'applicazione. È il requisito WCAG 2.4.7, ed è
   * anche la ragione per cui oggi con la tastiera non si capisce dove si è.   */
  --tl-focus-width:  2px;
  --tl-focus-offset: 2px;
  --tl-focus-color:  var(--tl-blue-500);
  --tl-focus-ring:   var(--tl-focus-width) solid var(--tl-focus-color);

  /* ── Bersagli ─────────────────────────────────────────────────────────────
   * 24px è il minimo di WCAG 2.2 (criterio 2.5.8, livello AA). 44px è la
   * misura comoda per il dito. Oggi diverse icone d'azione stanno sotto i 16.  */
  --tl-target-min:     24px;
  --tl-target-comfort: 32px;
  --tl-target-touch:   44px;

  /* ── Controlli di modulo ──────────────────────────────────────────────── */
  --tl-control-height:    32px;
  --tl-control-height-sm: 26px;
  --tl-control-height-lg: 40px;
  --tl-control-padding-x: var(--tl-space-3);

  /* ── Piani di sovrapposizione ─────────────────────────────────────────────
   * Dichiarati qui perché lo z-index inventato caso per caso è il modo classico
   * in cui un menu finisce sotto a una tabella e nessuno capisce perché.       */
  --tl-z-base:     0;
  --tl-z-sticky:   100;   /* intestazioni di tabella che restano ferme        */
  --tl-z-sidebar:  200;
  --tl-z-dropdown: 300;
  --tl-z-overlay:  400;   /* la velatura sotto a una finestra                 */
  --tl-z-modal:    500;
  --tl-z-toast:    600;   /* i messaggi stanno sopra a tutto                  */

  /* ── Movimento ────────────────────────────────────────────────────────── */
  --tl-duration-fast: 120ms;
  --tl-duration:      200ms;
  --tl-duration-slow: 320ms;
  --tl-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --tl-ease-out:      cubic-bezier(0, 0, 0.2, 1);

  /* ── Misure della struttura di pagina ─────────────────────────────────── */
  --tl-sidebar-width:          248px;
  --tl-sidebar-width-collapsed: 56px;
  --tl-topbar-height:          48px;
  --tl-content-max:            1600px;
}

/* ── Chi ha chiesto di ridurre le animazioni ─────────────────────────────────
 * Preferenza di sistema, non un'opzione dell'applicazione. Va rispettata a
 * livello di token, così vale per ogni componente senza doverlo ricordare.    */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tl-duration-fast: 0ms;
    --tl-duration:      0ms;
    --tl-duration-slow: 0ms;
  }
}