/* ============================================================
   brand.css — token di brand (variabili --fv-*), tema chiaro e tema scuro,
   e il carattere Lato.

   Dal 21/10/2026 è la stessa copia della Dashboard
   (FacchiniVerdi.Dashboard.Frontend/assets/css/brand.css), che viene da
   FacchiniVerdi.Gestionale.OLD (frontend/assets/css/brand.css), che a sua
   volta copia i valori del brand kit (FacchiniVerdi.Brand/03_Colori/
   palette.css) e ci aggiunge i valori derivati del tema scuro, già
   verificati per il contrasto. I valori sono gli stessi che Voucher aveva
   dal 23/09/2026. Da là non si legge niente: se il brand kit cambia,
   questa copia si riallinea a mano, in un commit che resta nella storia
   (decisione «Grafica» del LEGGIMI).

   È l'unico file con colori scritti per esteso: interfaccia.css li usa
   solo tramite var(--fv-…) (Stack, DD-13: per un cliente cambiano i
   valori qui, non i nomi). Le due eccezioni, scritte apposta: il voucher
   e il QR dell'attivazione, che il browser disegna sempre chiari e neri
   su bianco (immagine-voucher.js, attivazione.js).

   Il carattere Lato NON arriva da Google Fonts ma da assets/caratteri/,
   sul nostro server (23/09/2026): chi apre la pagina per chiedere un
   voucher non deve lasciare a un altro sito il proprio indirizzo e l'ora
   in cui l'ha aperta. Tre pesi (400 testo, 700 titoli e pulsanti, 900
   cifre in evidenza), solo alfabeto latino, che copre l'italiano;
   licenza SIL OFL 1.1 in assets/caratteri/OFL.txt.

   I valori del TEMA CHIARO sono i colori ufficiali del brand: non vanno
   cambiati. I valori del TEMA SCURO sono derivati: il petrolio #006A7A su
   fondo scuro sarebbe illeggibile, quindi diventa #4FB8C9 per testi e
   accenti, mentre resta il colore pieno dei pulsanti con sopra il testo
   scuro.

   Come funzionano i tre stati:
     · nessuna scelta   → segue il sistema operativo (prefers-color-scheme)
     · data-tema=chiaro → forza il chiaro
     · data-tema=scuro  → forza lo scuro
   ============================================================ */

@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('../caratteri/lato-400.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('../caratteri/lato-700.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('../caratteri/lato-900.woff2') format('woff2'); }

/* ------------------------------------------------------------
   TEMA CHIARO — colori ufficiali del brand
   ------------------------------------------------------------ */
:root {
  color-scheme: light;

  /* Primario */
  --fv-primary:            #006A7A;
  --fv-primary-dark:       #00525F;   /* stato premuto / passaggio del mouse */
  --fv-primary-hover:      #BCD9DC;
  --fv-primary-tint:       #E4F2F4;
  --fv-su-primary:         #FFFFFF;   /* testo sopra il colore pieno */

  /* Testo */
  --fv-text:               #49696D;
  /* Il brand indica #5B898E, ma su fondo chiaro dà 3.4:1 — sotto la soglia
     WCAG AA per il testo normale (4.5:1). Qui serve per didascalie e testi
     secondari, quindi si usa lo stesso tono scurito quanto basta: 4.9:1
     anche sul fondo più chiaro su cui compare. #5B898E resta valido per
     il testo grande e per la grafica. */
  --fv-text-muted:         #456D72;
  --fv-text-strong:        #1E161D;
  --fv-text-inverse:       #FFFFFF;

  /* Superfici */
  --fv-bg:                 #F7F8FC;
  --fv-surface:            #FFFFFF;
  --fv-surface-muted:      #E5F1F1;
  --fv-surface-neutral:    #ECEEF6;

  /* Bordi */
  --fv-bordo:              #E9ECEF;
  --fv-bordo-forte:        #DEE2E6;

  /* Stato */
  --fv-success:            #32D296;
  --fv-warning:            #FFA255;
  --fv-danger:             #FF4151;

  --fv-successo-fondo:     #D9F7EA;
  --fv-successo-testo:     #0C6B46;
  --fv-errore-fondo:       #FFE9EB;
  --fv-errore-testo:       #8A1F29;
  --fv-avviso-fondo:       #FFF3E0;
  --fv-avviso-testo:       #7A3E00;
  --fv-neutro-fondo:       #ECEEF6;
  --fv-neutro-testo:       #456D72;

  /* Neutri */
  --fv-gray-200:           #E9ECEF;
  --fv-gray-300:           #DEE2E6;
  --fv-gray-500:           #ADB5BD;

  /* Effetti */
  --fv-anello:             rgba(0, 106, 122, .15);   /* alone del focus */
  --fv-velo:               rgba(30, 22, 29, .45);    /* dietro le finestre modali */
  --fv-shadow-sm:          0 1px 3px rgba(0, 106, 122, .08);
  --fv-shadow:             0 2px 12px rgba(0, 106, 122, .10);
  --fv-shadow-lg:          0 12px 32px rgba(0, 106, 122, .16);

  /* Tipografia */
  --fv-font:               'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Forma */
  --fv-radius:             12px;
  --fv-radius-sm:          4px;
  --fv-radius-pill:        500px;

  --fv-transition:         .2s ease-in-out;
}

/* ------------------------------------------------------------
   TEMA SCURO — valori derivati
   Si applicano in due casi: quando il sistema lo chiede e l'utente non
   ha forzato il chiaro, e quando l'utente sceglie esplicitamente lo scuro.
   Il blocco è duplicato perché i selettori non si possono raggruppare
   fra una media query e una regola normale.
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    color-scheme: dark;

    --fv-primary:          #4FB8C9;
    --fv-primary-dark:     #74CEDD;
    --fv-primary-hover:    #1E4A52;
    --fv-primary-tint:     #143036;
    --fv-su-primary:       #0F1719;

    --fv-text:             #C3D4D6;
    --fv-text-muted:       #8CA3A7;
    --fv-text-strong:      #E8F1F2;
    --fv-text-inverse:     #0F1719;

    --fv-bg:               #0F1719;
    --fv-surface:          #162225;
    --fv-surface-muted:    #1B2C30;
    --fv-surface-neutral:  #1A2326;

    --fv-bordo:            #24373B;
    --fv-bordo-forte:      #2E464B;

    --fv-success:          #5FD9A8;
    --fv-warning:          #FFB877;
    --fv-danger:           #FF7A85;

    --fv-successo-fondo:   #12332A;
    --fv-successo-testo:   #5FD9A8;
    --fv-errore-fondo:     #3A1B1F;
    --fv-errore-testo:     #FF9AA3;
    --fv-avviso-fondo:     #3A2A14;
    --fv-avviso-testo:     #FFCB92;
    --fv-neutro-fondo:     #223438;
    --fv-neutro-testo:     #A8BFC3;

    --fv-gray-200:         #24373B;
    --fv-gray-300:         #2E464B;
    --fv-gray-500:         #6B8287;

    --fv-anello:           rgba(79, 184, 201, .25);
    --fv-velo:             rgba(0, 0, 0, .65);
    --fv-shadow-sm:        0 1px 3px rgba(0, 0, 0, .40);
    --fv-shadow:           0 2px 12px rgba(0, 0, 0, .45);
    --fv-shadow-lg:        0 12px 32px rgba(0, 0, 0, .55);
  }
}

:root[data-tema="scuro"] {
  color-scheme: dark;

  --fv-primary:            #4FB8C9;
  --fv-primary-dark:       #74CEDD;
  --fv-primary-hover:      #1E4A52;
  --fv-primary-tint:       #143036;
  --fv-su-primary:         #0F1719;

  --fv-text:               #C3D4D6;
  --fv-text-muted:         #8CA3A7;
  --fv-text-strong:        #E8F1F2;
  --fv-text-inverse:       #0F1719;

  --fv-bg:                 #0F1719;
  --fv-surface:            #162225;
  --fv-surface-muted:      #1B2C30;
  --fv-surface-neutral:    #1A2326;

  --fv-bordo:              #24373B;
  --fv-bordo-forte:        #2E464B;

  --fv-success:            #5FD9A8;
  --fv-warning:            #FFB877;
  --fv-danger:             #FF7A85;

  --fv-successo-fondo:     #12332A;
  --fv-successo-testo:     #5FD9A8;
  --fv-errore-fondo:       #3A1B1F;
  --fv-errore-testo:       #FF9AA3;
  --fv-avviso-fondo:       #3A2A14;
  --fv-avviso-testo:       #FFCB92;
  --fv-neutro-fondo:       #223438;
  --fv-neutro-testo:       #A8BFC3;

  --fv-gray-200:           #24373B;
  --fv-gray-300:           #2E464B;
  --fv-gray-500:           #6B8287;

  --fv-anello:             rgba(79, 184, 201, .25);
  --fv-velo:               rgba(0, 0, 0, .65);
  --fv-shadow-sm:          0 1px 3px rgba(0, 0, 0, .40);
  --fv-shadow:             0 2px 12px rgba(0, 0, 0, .45);
  --fv-shadow-lg:          0 12px 32px rgba(0, 0, 0, .55);
}