/* =========================================================================
   CCNL Metalmeccanici 2021 — UILM
   Foglio 1 di 6: COLORI E VARIABILI

   Tutti i colori e le misure, per il tema chiaro e per quello scuro.
   Deve essere caricato per primo: gli altri fogli usano queste variabili.
   ========================================================================= */

/* =========================================================================
   CCNL Metalmeccanici 2021 — UILM
   Foglio di stile principale. Mobile first, poi adattamento a tablet/desktop.
   ========================================================================= */

:root {
  /* Colori UILM */
  --blu: #0b4ea2;
  /* colori della tabella minimi (si adattano al tema) */
  --oro-testo: #8a6508;
  --tab-livello-testo: #0b4ea2;
  --tab-percentuale-testo: #8a6508;
  --blu-scuro: #062f66;
  --blu-chiaro: #e8f0fb;
  --giallo: #ffd34d;          /* sull'intestazione blu: va bene cosi' */
  --oro: #e0a800;

  /* Su FONDO CHIARO il giallo oro del marchio e' troppo debole: #e0a800 sui
     riquadri ambra dava 2:1, sotto il minimo di 3:1 per gli elementi
     grafici, e a occhio spariva. Questi due colori si usano solo sul fondo
     chiaro: l'intestazione blu resta com'e' (li' il giallo si vede bene). */
  --oro-bordo: #b98600;       /* bordi dei riquadri: 3.0:1 sull'ambra */
  --giallo-evid: #ffcc00;     /* evidenziazione ricerche: piu' incisivo */

  /* Neutri */
  --testo: #1a1d21;
  --testo-tenue: #5a6472;
  --testo-debole: #828b98;
  --sfondo: #f4f6f9;
  --superficie: #ffffff;
  --bordo: #dde3ec;
  --bordo-tenue: #eaeef4;

  /* Stati */
  --verde: #1a7f4b;
  --verde-chiaro: #e6f6ed;
  --rosso: #c0392b;
  --rosso-chiaro: #fdecea;
  /* Testo degli avvisi gialli. Era #8a6100: passava il minimo (5.15:1) ma su
     un fondo giallastro lo stesso marrone rende la lettura faticosa, e su testi
     lunghi si sente. Questo e' piu' scuro ma resta marrone: 11.6:1, il doppio.
     Il tema scuro ha i suoi valori chiari e non e' toccato. */
  --ambra: #463000;
  --ambra-testo: #463000;
  --ambra-chiaro: #fff6e0;

  /* Metriche */
  --raggio: 14px;
  --raggio-piccolo: 10px;
  --ombra: 0 1px 2px rgba(16, 30, 54, .06), 0 4px 14px rgba(16, 30, 54, .06);
  --ombra-alta: 0 6px 26px rgba(16, 30, 54, .14);
  --altezza-intestazione: 60px;
  --altezza-nav: 62px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --testo: #eef2f7;
    --testo-tenue: #a9b4c3;
    --testo-debole: #8592a3;
    --sfondo: #0f1319;
    --superficie: #171d26;
    --bordo: #29323f;
    --bordo-tenue: #212936;
    --blu-chiaro: #16233a;
    --oro-testo: #e8b93c;
    --ambra-testo: #f0c878;
    --tab-livello-testo: #8ab6f0;
    --tab-percentuale-testo: #e8b93c;
    --verde-chiaro: #112a1d;
    --rosso-chiaro: #2e1614;
    --ambra-chiaro: #2c2312;
    --ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
    --ombra-alta: 0 6px 26px rgba(0, 0, 0, .5);
  }
}

/* ------------------------------------------------- tema scuro forzato */
/* Il tema scuro automatico del sistema resta, ma l'utente puo forzare
   chiaro o scuro dal pulsante: l'attributo su <html> ha la precedenza. */
html[data-tema="scuro"] {
  --testo: #eef2f7;
  --testo-tenue: #a9b4c3;
  --testo-debole: #8592a3;
  --sfondo: #0f1319;
  --superficie: #171d26;
  --bordo: #29323f;
  --bordo-tenue: #212936;
  --blu-chiaro: #16233a;
  --oro-testo: #e8b93c;
  --ambra-testo: #f0c878;
  --tab-livello-testo: #8ab6f0;
  --tab-percentuale-testo: #e8b93c;
  --verde-chiaro: #112a1d;
  --rosso-chiaro: #2e1614;
  --ambra-chiaro: #2c2312;
  --ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  --ombra-alta: 0 6px 26px rgba(0, 0, 0, .5);
}
html[data-tema="chiaro"] {
  --testo: #1a1d21;
  --testo-tenue: #5a6472;
  --testo-debole: #828b98;
  --sfondo: #f4f6f9;
  --superficie: #ffffff;
  --bordo: #dde3ec;
  --bordo-tenue: #eaeef4;
  --blu-chiaro: #e8f0fb;
  --verde-chiaro: #e6f6ed;
  --rosso-chiaro: #fdecea;
  --ambra-chiaro: #fff6e0;
  /* Queste quattro MANCAVANO: se il sistema e' in tema scuro, il blocco
     @media (prefers-color-scheme: dark) le imposta con i colori chiari del
     tema scuro, e scegliendo "chiaro" nel sito restavano chiare su fondo
     chiaro. Il testo degli avvisi finiva a 1.5:1, praticamente invisibile. */
  --ambra-testo: #463000;
  --oro-testo: #8a6508;
  --tab-livello-testo: #0b4ea2;
  --tab-percentuale-testo: #8a6508;
  --ombra: 0 1px 2px rgba(16, 30, 54, .06), 0 4px 14px rgba(16, 30, 54, .06);
  --ombra-alta: 0 6px 26px rgba(16, 30, 54, .14);
}