/* COPIA da depy/static/css/tokens.css (commit 1360520, 10/11/2026). Non modificare qui:
   se cambia in Depy si ricopia (vedi web/css/depy/LEGGIMI.md). */
/* =========================================================================
   DESIGN TOKEN DI DEPY
   Un posto solo per colori, spazi, raggi, ombre, piani e caratteri.
   Si carica prima di style.css e prima delle stampe.

   I colori del marchio sono i due del logo (static/img/logo-depy-blu.svg):
   il blu #193257 e il verde #56b67f, piu' il bianco. Tutte le altre tinte
   qui sotto sono schiariture o scurimenti di quei due: i grigi sono il blu
   del logo quasi senza colore. Niente colori inventati fuori dal logo.
   Rosso e ambra restano solo per gli stati di sistema (errore, attenzione,
   merce che esce, da comprare): non sono colori del marchio e non vanno
   usati per menu, pulsanti o titoli.

   I componenti usano i RUOLI (--sfondo, --testo, --primario...), non le
   scale: cosi' il tema scuro e' una sola ridefinizione in fondo a questo
   file e non cinquecento regole sparse.
   ========================================================================= */

:root {
    /* ── Blu del logo (700 e' il colore esatto) ── */
    --blu-50:  #f6f7f8;
    --blu-100: #e8eaee;
    --blu-200: #ccd2da;
    --blu-300: #a3adbc;
    --blu-400: #75849a;
    --blu-500: #475b79;
    --blu-700: #193257;
    --blu-800: #142744;
    --blu-900: #0e1d32;

    /* ── Verde del logo (400 e' il colore esatto) ── */
    --verde-50:  #f1f9f5;
    --verde-100: #e4f3eb;
    --verde-200: #c6e6d3;
    --verde-300: #96d2b0;
    --verde-400: #56b67f;
    --verde-500: #479568;
    --verde-600: #397854;   /* il primo che regge il testo bianco (5.3:1) */
    --verde-700: #2b5b40;
    --verde-800: #214530;

    /* ── Grigi: il blu del logo quasi senza colore ── */
    --grigio-50:  #f8f8f9;
    --grigio-100: #f1f2f4;
    --grigio-200: #e2e5e9;
    --grigio-300: #ccd0d7;
    --grigio-400: #9ea6b3;
    --grigio-500: #768293;
    --grigio-550: #636d7c;   /* il grigio piu' chiaro che si legge ancora come testo (5.2:1 sul bianco) */
    --grigio-600: #555f6d;
    --grigio-700: #3a414a;
    --grigio-800: #262a31;
    --grigio-900: #191b1f;

    /* ── Colori di sistema (non del marchio): solo per gli stati ── */
    --rosso-800: #962d22;
    --rosso-700: #c0392b;   /* merce che esce, errore */
    --rosso-500: #e74c3c;
    --rosso-300: #eea89f;
    --rosso-200: #f5cfc9;
    --rosso-100: #fbe7e4;
    --rosso-50:  #fdf6f5;
    --ambra-800: #9c6b00;
    --ambra-700: #c78a00;   /* da comprare, attenzione */
    --ambra-500: #e3a008;
    --ambra-300: #f1c86a;
    --ambra-200: #f8e0a8;
    --ambra-100: #fdf0cf;
    --ambra-50:  #fefaf0;
    --ambra-testo: #3d2c00;

    /* ── RUOLI: quelli che i componenti devono usare ── */
    --sfondo:          var(--grigio-50);
    --superficie:      #ffffff;
    --superficie-2:    var(--grigio-100);
    --testo:           var(--blu-900);
    /* Testo secondario e debole ben staccati dal bianco (10:1 e 6.5:1):
       Alessandro trovava tenui anche i grigi da 6.5:1. Chi li vuole piu'
       morbidi sceglie «Leggero» in Preferenze > Aspetto. */
    --testo-2:         var(--grigio-700);
    --testo-debole:    var(--grigio-600);
    --bordo:           var(--grigio-300);
    --bordo-forte:     var(--grigio-400);
    --velo:            var(--grigio-100);

    --primario:        var(--blu-700);
    --primario-hover:  var(--blu-800);
    --primario-tenue:  var(--blu-100);
    --su-primario:     #ffffff;
    /* gli stessi due colori in numeri, per le velature: rgba(var(--primario-rgb), .1).
       Con i colori dell'azienda li cambia services/colori_tenant.py */
    --primario-rgb:    25, 50, 87;
    --accento-rgb:     86, 182, 127;
    --blu-500-rgb:     71, 91, 121;
    --ok-rgb:          57, 120, 84;
    --no-rgb:          192, 57, 43;
    --attenzione-rgb:  227, 160, 8;

    --accento:         var(--verde-400);   /* il verde del logo: azione in corso, voce scelta */
    --accento-forte:   var(--verde-600);   /* lo stesso verde dove sopra ci va testo bianco */
    --accento-tenue:   var(--verde-100);

    --ok:              var(--verde-600);
    --ok-tenue:        var(--verde-100);
    --no:              var(--rosso-700);
    --no-tenue:        var(--rosso-100);
    --attenzione:      var(--ambra-500);
    --attenzione-tenue:var(--ambra-100);

    /* Riquadri "al contrario": tooltip, numeri dei passi, suggerimenti scuri su pagina chiara */
    --inverso:         var(--blu-900);
    --su-inverso:      #ffffff;
    --su-inverso-2:    var(--blu-200);

    /* Menu laterale: il blu del logo, pieno */
    --menu-sfondo:     var(--blu-800);
    --menu-sfondo-2:   var(--blu-700);
    --menu-testo:      var(--blu-100);
    --menu-testo-forte:#ffffff;
    --menu-attivo:     var(--verde-400);

    /* ── Spaziatura su 4px ── */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

    /* ── Raggi ── */
    --r-xs: 4px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

    /* ── Ombre ── */
    --ombra-1: 0 1px 3px rgba(14,29,50,.05);
    --ombra-2: 0 2px 12px rgba(14,29,50,.06);
    --ombra-3: 0 6px 16px rgba(14,29,50,.08);
    --ombra-4: 0 18px 40px rgba(14,29,50,.16);

    /* ── Piani ── */
    --z-sticky: 1020; --z-barra: 1030; --z-velo: 1039; --z-pannello: 1040;
    --z-menu: 1060; --z-notifiche: 1080; --z-toast: 1090; --z-tenda: 1200;

    /* ── Caratteri ── */
    --fs-xs: .72rem; --fs-sm: .8rem; --fs-base: .9rem; --fs-md: 1rem;
    --fs-lg: 1.15rem; --fs-xl: 1.35rem; --fs-2xl: 1.5rem; --fs-3xl: 2rem;

    /* ── Ponte verso Bootstrap: .btn-primary, barre, anelli di fuoco
          seguono il marchio senza regole di scavalco ── */
    --bs-primary: #193257;
    --bs-primary-rgb: 25, 50, 87;
    --bs-success: #397854;
    --bs-success-rgb: 57, 120, 84;
    --bs-link-color: #193257;
    --bs-link-color-rgb: 25, 50, 87;
    --bs-link-hover-color: #142744;
    --bs-link-hover-color-rgb: 20, 39, 68;
    --bs-body-bg: var(--sfondo);
    --bs-body-color: var(--testo);
    --bs-border-color: var(--bordo);
    --bs-focus-ring-color: rgba(var(--accento-rgb), .35);
    /* I colori "di sistema" di Bootstrap (success, danger, warning, info,
       secondary, dark) sui nostri: cosi' .badge.bg-*, .text-*, .alert-* e
       .bg-*-subtle sono gia' giusti, pieni, senza regole per selettore. */
    --bs-success: #397854;  --bs-success-rgb: 57, 120, 84;
    --bs-danger: #c0392b;   --bs-danger-rgb: 192, 57, 43;
    --bs-warning: #e3a008;  --bs-warning-rgb: 227, 160, 8;
    --bs-info: #475b79;     --bs-info-rgb: 71, 91, 121;
    --bs-secondary: #555f6d; --bs-secondary-rgb: 85, 95, 109;
    --bs-dark: #0e1d32;     --bs-dark-rgb: 14, 29, 50;
    --bs-primary-bg-subtle: var(--blu-100);     --bs-primary-border-subtle: var(--blu-200);     --bs-primary-text-emphasis: var(--blu-900);
    --bs-success-bg-subtle: var(--verde-100);   --bs-success-border-subtle: var(--verde-200);   --bs-success-text-emphasis: var(--verde-800);
    --bs-danger-bg-subtle: var(--rosso-100);    --bs-danger-border-subtle: var(--rosso-200);    --bs-danger-text-emphasis: var(--rosso-800);
    --bs-warning-bg-subtle: var(--ambra-100);   --bs-warning-border-subtle: var(--ambra-200);   --bs-warning-text-emphasis: var(--ambra-800);
    --bs-info-bg-subtle: var(--blu-100);        --bs-info-border-subtle: var(--blu-200);        --bs-info-text-emphasis: var(--blu-800);
    --bs-secondary-bg-subtle: var(--grigio-100); --bs-secondary-border-subtle: var(--grigio-200); --bs-secondary-text-emphasis: var(--grigio-800);
    --bs-light-bg-subtle: var(--grigio-50);     --bs-light-border-subtle: var(--grigio-200);    --bs-light-text-emphasis: var(--grigio-700);
    --bs-dark-bg-subtle: var(--grigio-200);     --bs-dark-border-subtle: var(--grigio-300);     --bs-dark-text-emphasis: var(--grigio-900);

    /* ── Nomi vecchi, ancora letti da style.css e dai template:
          restano come alias finche' non si sostituiscono ── */
    --primary-color:   var(--primario);
    --secondary-color: var(--blu-500);
    --success-color:   var(--ok);
    --warning-color:   var(--attenzione);
    --danger-color:    var(--rosso-500);
    --sidebar-width:   280px;
    --topbar-h:        60px;   /* la barra in alto: le testate fisse degli elenchi si fermano qui sotto */
    --sidebar-bg:      var(--menu-sfondo);
    --sidebar-hover:   var(--menu-sfondo-2);

    --hb-bordo:        var(--bordo);
    --hb-bordo-forte:  var(--bordo-forte);
    --hb-grigio:       var(--testo-2);
    --hb-velo:         var(--velo);
    --dp-bordo:        var(--bordo);
    --dp-bordo-forte:  var(--bordo-forte);
    --dp-grigio:       var(--testo-2);
    --dp-velo:         var(--velo);
    --hb-verde:        var(--verde-600);
    --hb-rosso:        var(--rosso-700);
    --hb-entra-velo:   var(--verde-50);
    --hb-entra-bordo:  var(--verde-200);
    --hb-entra-ico:    var(--verde-100);
    --hb-esce-velo:    var(--rosso-50);
    --hb-esce-bordo:   #f1d9d5;
    --hb-esce-ico:     var(--rosso-100);
    --hb-lavoro-ico:   var(--blu-100);
    --hb-lavoro-velo:  var(--blu-50);
    --hb-lavoro-tinta: var(--blu-500);
    --hb-ordina:       var(--blu-200);     /* era un celeste fuori dal logo */
    --hb-ordina-scuro: var(--blu-300);
    --hb-ordina-testo: var(--blu-900);
    --hb-compra:       var(--ambra-500);
    --hb-compra-scuro: var(--ambra-700);
    --hb-compra-testo: var(--ambra-testo);
    --hb-compra-ico:   var(--ambra-100);
}

@media (max-width: 576px) {
    :root { --sidebar-width: 260px; }
}

/* =========================================================================
   TEMA SCURO: solo i ruoli cambiano valore. Nessun componente deve
   ridichiarare un colore per il buio: se usa i ruoli, e' gia' giusto.
   Il selettore e' html[...] cosi' vince sul :root qui sopra a prescindere
   dall'ordine (era il bug dei colori di casa rimasti chiari di notte).
   ========================================================================= */
html[data-bs-theme="dark"] {
    --sfondo:          #1a1d21;
    --superficie:      var(--grigio-800);
    --superficie-2:    var(--grigio-700);
    --testo:           #e9ecef;
    --testo-2:         var(--grigio-300);
    --testo-debole:    var(--grigio-400);
    --bordo:           #343a40;
    --bordo-forte:     #495057;
    --velo:            #262b30;

    --primario:        var(--blu-300);     /* su fondo scuro il blu pieno sparisce: si usa la sua schiaritura */
    --primario-hover:  var(--blu-200);
    --primario-tenue:  rgba(var(--primario-rgb),.35);
    --su-primario:     var(--blu-900);

    --accento:         var(--verde-400);
    --accento-forte:   var(--verde-500);
    --accento-tenue:   rgba(var(--accento-rgb),.18);

    --ok:              var(--verde-300);
    --ok-tenue:        rgba(var(--ok-rgb),.28);
    --no:              #e8857a;
    --no-tenue:        rgba(var(--no-rgb),.28);
    --attenzione:      var(--ambra-500);
    --attenzione-tenue:rgba(var(--attenzione-rgb),.22);

    --menu-sfondo:     var(--blu-900);
    --menu-sfondo-2:   var(--blu-800);

    --inverso:         var(--grigio-100);
    --su-inverso:      var(--grigio-900);
    --su-inverso-2:    var(--grigio-600);

    --ombra-1: 0 1px 3px rgba(0,0,0,.35);
    --ombra-2: 0 2px 12px rgba(0,0,0,.4);
    --ombra-3: 0 6px 16px rgba(0,0,0,.45);
    --ombra-4: 0 18px 40px rgba(0,0,0,.6);

    --bs-body-bg: var(--sfondo);
    --bs-body-color: var(--testo);
    --bs-border-color: var(--bordo);
    /* Le utility di Bootstrap a colore fisso (.bg-white, .bg-light, .text-dark,
       .text-black, .text-body, .text-muted) leggono questi valori: di notte
       diventano superficie e testo senza regole !important. */
    --bs-white-rgb: 38, 42, 49;
    --bs-light-rgb: 38, 42, 49;
    --bs-body-bg-rgb: 26, 29, 33;
    --bs-dark-rgb: 233, 236, 239;
    --bs-black-rgb: 233, 236, 239;
    --bs-body-color-rgb: 233, 236, 239;
    --bs-secondary-color: var(--testo-2);
    --bs-secondary-color-rgb: 158, 166, 179;
    /* sfondi tenui di notte: le stesse tinte, velate sul fondo scuro */
    --bs-primary-bg-subtle: rgba(var(--primario-rgb), .35);    --bs-primary-border-subtle: var(--blu-700);   --bs-primary-text-emphasis: var(--blu-200);
    --bs-success-bg-subtle: rgba(var(--ok-rgb), .25);   --bs-success-border-subtle: var(--verde-700); --bs-success-text-emphasis: var(--verde-300);
    --bs-danger-bg-subtle: rgba(var(--no-rgb), .25);    --bs-danger-border-subtle: var(--rosso-700);  --bs-danger-text-emphasis: var(--rosso-300);
    --bs-warning-bg-subtle: rgba(var(--attenzione-rgb), .22);   --bs-warning-border-subtle: var(--ambra-700); --bs-warning-text-emphasis: var(--ambra-200);
    --bs-info-bg-subtle: rgba(var(--blu-500-rgb), .3);       --bs-info-border-subtle: var(--blu-500);      --bs-info-text-emphasis: var(--blu-200);
    --bs-secondary-bg-subtle: rgba(118, 130, 147, .3); --bs-secondary-border-subtle: var(--grigio-600); --bs-secondary-text-emphasis: var(--grigio-300);
    --bs-light-bg-subtle: var(--grigio-800);          --bs-light-border-subtle: var(--grigio-700);  --bs-light-text-emphasis: var(--grigio-200);
    --bs-dark-bg-subtle: var(--grigio-700);           --bs-dark-border-subtle: var(--grigio-600);   --bs-dark-text-emphasis: var(--grigio-100);

    /* alias vecchi, versione notturna */
    --hb-grigio:       var(--testo-2);
    --dp-grigio:       var(--testo-2);
    --hb-entra-velo:   rgba(var(--ok-rgb),.16);
    --hb-entra-bordo:  #2f6b49;
    --hb-entra-ico:    rgba(var(--ok-rgb),.32);
    --hb-esce-velo:    rgba(var(--no-rgb),.14);
    --hb-esce-bordo:   #7a3a33;
    --hb-esce-ico:     rgba(var(--no-rgb),.30);
    --hb-lavoro-velo:  rgba(var(--primario-rgb),.35);
    --hb-lavoro-ico:   rgba(var(--primario-rgb),.5);
}

/* =========================================================================
   CONTRASTO: scelta di ciascuno (Preferenze > Aspetto), salvata nel browser
   come il tema. «Normale» sono i valori qui sopra; le altre due cambiano
   solo i ruoli del testo e dei bordi. I selettori hanno due attributi per
   vincere sui blocchi del tema chiaro e scuro qualunque sia l'ordine.
   ========================================================================= */
html[data-contrasto="leggero"]:not([data-bs-theme="dark"]) {
    --testo-2:         var(--grigio-600);
    --testo-debole:    var(--grigio-550);
    --bordo:           var(--grigio-200);
    --bordo-forte:     var(--grigio-300);
    --bs-border-color: var(--grigio-200);
}
html[data-contrasto="forte"]:not([data-bs-theme="dark"]) {
    --testo:           #000000;
    --testo-2:         var(--grigio-800);   /* 14:1 sul bianco */
    --testo-debole:    var(--grigio-700);
    --bordo:           var(--grigio-400);
    --bordo-forte:     var(--grigio-500);
    --bs-border-color: var(--grigio-400);
}
html[data-bs-theme="dark"][data-contrasto="leggero"] {
    --testo-2:         var(--grigio-400);
    --testo-debole:    var(--grigio-500);
}
html[data-bs-theme="dark"][data-contrasto="forte"] {
    --testo:           #ffffff;
    --testo-2:         var(--grigio-200);
    --testo-debole:    var(--grigio-300);
    --bordo:           #4b525a;
    --bordo-forte:     #6c757d;
    --bs-border-color: #4b525a;
}

/* GRANDEZZA DEL TESTO: anche questa di ciascuno. Tutto Depy e' in rem,
   quindi cambiando la base si ingrandiscono insieme scritte, pulsanti,
   tabelle e menu. Media = 16px, quella del browser. */
html[data-testo="piccolo"]      { font-size: 93.75%; }
html[data-testo="grande"]       { font-size: 112.5%; }
html[data-testo="molto-grande"] { font-size: 125%; }