/* =========================================================================
   RETROBOTTEGA — BASE
   Il gestionale del Point parla la lingua del sito v5
   (sito-lavaseccopoint-v5/css/sistema.css): stesso verde dell'insegna,
   stessa ambra, stessi due caratteri, stesse tre regole.

     1. raggio zero: nessun angolo arrotondato (eccezioni dichiarate: il
        pallino di stato e l'anello di focus);
     2. nessuna ombra: la profondita' si fa con il colore. L'unica eccezione
        e' il velo dietro ai pannelli laterali;
     3. la linea separa, il vuoto raggruppa.

   Il prodotto e' una parete di sportelli: anche qui le superfici sono
   celle contigue divise da un filo, mai riquadri che galleggiano.

   Tema chiaro per scelta: e' uno strumento da bancone, con la sua
   identita' (colonna verde scuro, carta bianca). Tutti i fondi sono
   dipinti in modo esplicito, cosi' la pagina regge su qualunque host.
   ========================================================================= */

:root {
  color-scheme: light;

  /* Verde dell'insegna, dal fondo piu' profondo al velo piu' chiaro */
  --verde:        #009a9c;   /* spie, riempimenti, fili. MAI testo su carta  */
  --verde-chiaro: #00b0b2;
  --verde-600:    #008587;
  --verde-scuro:  #007072;   /* link, cifre cliccabili                       */
  --verde-800:    #005c5e;   /* testo dentro le etichette chiare             */
  --verde-900:    #04413f;   /* superfici scure, voce attiva del menu        */
  --verde-950:    #01302f;   /* colonna del menu                             */
  --verde-50:     #eaf6f4;   /* riga selezionata, etichetta                  */
  --verde-100:    #c2e6e6;

  /* Ambra: un solo lavoro, chiamare all'azione (e contare cio' che aspetta) */
  --ambra:        #f5a623;
  --ambra-chiara: #ffb943;
  --ambra-scura:  #d98c00;
  --ambra-testo:  #8a5300;
  --ambra-velo:   #fdf0da;

  /* Neutri: sono verdi desaturati, non grigi */
  --inchiostro:   #14312f;
  --inchiostro-2: #37504d;
  --inchiostro-3: #5c716e;
  --carta:        #ffffff;
  --carta-2:      #eef5f3;
  --carta-3:      #e2ece9;
  --linea:        #cfe0dc;
  --linea-chiara: #e4efec;
  --linea-forte:  #a9c3bd;

  /* Stati. Il verde di conferma non e' quello del marchio */
  --ok:           #16704a;
  --ok-velo:      #e3f1ea;
  --errore:       #a8241c;
  --errore-velo:  #f8e6e4;
  --attesa:       #8a5300;
  --attesa-velo:  #fdf0da;
  --spento:       #7d8d8a;
  --spento-velo:  #eef1f0;

  /* Velo dietro ai pannelli: l'unica profondita' ammessa */
  --velo:         rgba(1, 48, 47, .38);

  --f-testo: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-dato:  "Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scala tipografica dello strumento (px fissi: e' un'interfaccia) */
  --t-dato: 11px;    /* etichette in mono maiuscolo        */
  --t-xs:   12.5px;  /* note, didascalie                    */
  --t-sm:   13.5px;  /* celle di tabella, campi             */
  --t-base: 14.5px;  /* testo                               */
  --t-md:   16px;    /* titoletti                           */
  --t-lg:   20px;    /* titolo di pannello                  */
  --t-xl:   28px;    /* titolo di pagina                    */
  --t-kpi:  34px;    /* cifra principale di una cella      */

  --cr-dato: .12em;
  --cr-tit:  -.02em;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --menu: 244px;
  --testa: 60px;
  --margine: 32px;

  --filo:        1px solid var(--linea);
  --filo-chiaro: 1px solid var(--linea-chiara);
  --filo-forte:  1px solid var(--inchiostro);

  --curva:  cubic-bezier(.22, .61, .36, 1);
  --veloce: 140ms;
  --medio:  260ms;
}

*, *::before, *::after { box-sizing: border-box; }

/* hidden vince sempre: le barre che compaiono e spariscono hanno display flex */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

html, body { margin: 0; }

body {
  background: var(--carta-2);
  color: var(--inchiostro);
  font-family: var(--f-testo);
  font-size: var(--t-base);
  line-height: 1.5;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { cursor: pointer; }

a { color: var(--verde-scuro); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 650;
  letter-spacing: var(--cr-tit);
  line-height: 1.15;
  text-wrap: balance;
}

p { margin: 0; }

/* L'anello di focus e' l'unica curva ammessa insieme al pallino di stato */
:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}

::selection { background: var(--verde-100); color: var(--inchiostro); }

/* Etichetta in mono maiuscolo: la voce del gestionale */
.dato {
  font-family: var(--f-dato);
  font-size: var(--t-dato);
  font-weight: 500;
  letter-spacing: var(--cr-dato);
  text-transform: uppercase;
  color: var(--inchiostro-3);
}

.mono  { font-family: var(--f-dato); letter-spacing: 0; }
.cifre { font-variant-numeric: tabular-nums; }
.muto  { color: var(--inchiostro-3); }
.forte { font-weight: 650; }
.nascosto-a11y {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}