/* I valori del linguaggio visivo di ATRIO, e nient'altro.
   Chi vuole cambiare l'aspetto del prodotto tocca questo file e nessun altro.
   I nomi già in uso non si rinominano: sono referenziati in oltre cento punti.

   Il carattere del prodotto: è uno strumento che un amministratore usa tutto
   il giorno e proietta in assemblea davanti a chi gli affida dei soldi. Deve
   leggersi come preciso e affidabile, non come brillante. Da qui la tavolozza
   ristretta, il contrasto misurato e la densità: ciò che conta è quanta
   informazione si legge in un colpo d'occhio, non quanto è vistosa. */
:root{
  /* ── Neutri. Una scala vera, non tre grigi: le superfici hanno bisogno di
        gradini per distinguersi senza bordi ovunque. */
  --n-0:#ffffff;
  --n-25:#fbfcfd;
  --n-50:#f6f8fa;
  --n-100:#eef1f5;
  --n-200:#e2e7ee;
  --n-300:#ccd4de;
  --n-400:#9aa6b4;
  --n-500:#6b7885;
  --n-600:#4e5a67;
  --n-700:#39434e;
  --n-800:#252d36;
  --n-900:#161c22;

  /* Nomi in uso: non si rinominano, si riallineano alla scala. */
  --bg:var(--n-50); --superficie:var(--n-0); --bordo:var(--n-200);
  --testo:var(--n-900); --tenue:var(--n-500);

  /* ── Colore. Porta significato, non decora: un blu per l'azione e
        l'orientamento, tre colori per gli esiti, e basta. */
  --accento:#1d5b86; --accento-scuro:#14425f; --accento-chiaro:#2e7cb0;
  --ok:#17704a; --allerta:#a4540a; --errore:#a8231d;

  /* Sfondi tenui, derivati dai colori di significato */
  --ok-tenue:#e6f4ec; --allerta-tenue:#fdf2e3; --errore-tenue:#fbeceb;
  --accento-tenue:#e9f1f7; --neutro-tenue:var(--n-100);

  /* Il contorno di messa a fuoco: si vede sempre, su qualunque superficie,
     perché chi naviga da tastiera deve sapere dov'è. */
  --fuoco:#2e7cb0; --anello-fuoco:0 0 0 3px rgba(46,124,176,.32);

  /* Il testo sui fondi colorati (pulsante principale, barra), la barra in
     alto e le notifiche: nomi propri, perché il tema scuro li cambia a parte. */
  --su-colore:#ffffff; --barra-sfondo:var(--accento-scuro); --toast-sfondo:var(--n-800);

  /* ── Tipografia. Senza grazie per l'interfaccia, con grazie per i documenti:
        su carta le grazie guidano l'occhio lungo una riga lunga. */
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-doc:Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* Scala tipografica: pochi gradini, usati con disciplina */
  --t-xs:11.5px; --t-sm:12.5px; --t-base:14.5px; --t-md:16.5px; --t-lg:21px; --t-xl:27px;
  /* Le interlinee: strette sui titoli, larghe sul testo che si legge davvero */
  --i-stretta:1.2; --i-normale:1.45; --i-larga:1.6;
  /* Le etichette in maiuscoletto hanno bisogno di aria fra le lettere */
  --spazio-lettere:.06em;

  /* Spaziature: una scala sola, così i margini si sommano in modo prevedibile */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;

  /* Forme */
  --r:8px; --r-sm:5px; --r-lg:12px; --r-tondo:999px;
  /* Tre livelli di rilievo, non uno: una scheda posa, una finestra galleggia. */
  --ombra:0 1px 2px rgba(22,28,34,.05),0 1px 3px rgba(22,28,34,.07);
  --ombra-media:0 2px 4px rgba(22,28,34,.06),0 4px 12px rgba(22,28,34,.08);
  --ombra-alta:0 8px 24px rgba(22,28,34,.12),0 24px 56px rgba(22,28,34,.18);

  /* Misure dell'impaginazione */
  --menu-largo:230px; --barra-alta:54px; --testo-largo:72ch;
  /* Il menu si restringe in tavoletta e diventa un pannello a scomparsa in telefono */
  --menu-tavoletta:168px; --menu-telefono:248px;
  /* Un grafico oltre una certa larghezza smette di dire di più */
  --grafico-largo:760px;

  /* Movimento: un'unica durata per le transizioni dell'interfaccia */
  --transizione:.16s ease;
}

/* Chi ha chiesto meno movimento non deve subirlo. */
@media (prefers-reduced-motion:reduce){
  :root{ --transizione:0s }
}

/* ═══════════════════════════════ TEMA SCURO ═══════════════════════════════
   Per chi lavora la sera o preferisce uno schermo meno luminoso. Si sceglie
   dalla barra (automatico, chiaro, scuro); in automatico segue il sistema.
   La carta resta carta: documenti e prestampati si vedono bianchi anche qui,
   perché sono l'anteprima di ciò che esce dalla stampante. */
/* Solo a schermo: su carta vale sempre il tema chiaro. */
@media screen{
:root[data-tema="scuro"]{
  --n-0:#1a2129; --n-25:#1d252e; --n-50:#12171d; --n-100:#232c36; --n-200:#2d3742;
  --n-300:#3b4653; --n-400:#5d6978; --n-500:#8d99a6; --n-600:#aab4bf; --n-700:#c5cdd6;
  --n-800:#dfe5eb; --n-900:#eef2f6;
  --accento:#3d8fcc; --accento-scuro:#8cc3ec; --accento-chiaro:#5aa9e0;
  --ok:#4cc38a; --allerta:#e3a54b; --errore:#f07a70;
  --ok-tenue:#15301f; --allerta-tenue:#3a2b15; --errore-tenue:#3d1d1b; --accento-tenue:#1b3144;
  --fuoco:#5aa9e0; --anello-fuoco:0 0 0 3px rgba(90,169,224,.35);
  --barra-sfondo:#0d141b; --toast-sfondo:#2d3742;
  --ombra:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.35);
  --ombra-media:0 2px 4px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.4);
  --ombra-alta:0 8px 24px rgba(0,0,0,.5),0 24px 56px rgba(0,0,0,.55);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema]){
    --n-0:#1a2129; --n-25:#1d252e; --n-50:#12171d; --n-100:#232c36; --n-200:#2d3742;
    --n-300:#3b4653; --n-400:#5d6978; --n-500:#8d99a6; --n-600:#aab4bf; --n-700:#c5cdd6;
    --n-800:#dfe5eb; --n-900:#eef2f6;
    --accento:#3d8fcc; --accento-scuro:#8cc3ec; --accento-chiaro:#5aa9e0;
    --ok:#4cc38a; --allerta:#e3a54b; --errore:#f07a70;
    --ok-tenue:#15301f; --allerta-tenue:#3a2b15; --errore-tenue:#3d1d1b; --accento-tenue:#1b3144;
    --fuoco:#5aa9e0; --anello-fuoco:0 0 0 3px rgba(90,169,224,.35);
    --barra-sfondo:#0d141b; --toast-sfondo:#2d3742;
    --ombra:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.35);
    --ombra-media:0 2px 4px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.4);
    --ombra-alta:0 8px 24px rgba(0,0,0,.5),0 24px 56px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
/* La carta: i valori del tema chiaro, dentro il foglio. */
:root[data-tema="scuro"] :is(.documento,.prestampato,.foglio-etichette){
  --n-0:#ffffff; --n-25:#fbfcfd; --n-50:#f6f8fa; --n-100:#eef1f5; --n-200:#e2e7ee; --n-300:#ccd4de;
  --n-400:#9aa6b4; --n-500:#6b7885; --n-600:#4e5a67; --n-700:#39434e; --n-800:#252d36; --n-900:#161c22;
  --accento:#1d5b86; --accento-scuro:#14425f; --accento-tenue:#e9f1f7;
  --ok:#17704a; --allerta:#a4540a; --errore:#a8231d; --ok-tenue:#e6f4ec; --allerta-tenue:#fdf2e3; --errore-tenue:#fbeceb;
  --bg:var(--n-50); --superficie:var(--n-0); --bordo:var(--n-200); --testo:var(--n-900); --tenue:var(--n-500);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema]) :is(.documento,.prestampato,.foglio-etichette){
    --n-0:#ffffff; --n-25:#fbfcfd; --n-50:#f6f8fa; --n-100:#eef1f5; --n-200:#e2e7ee; --n-300:#ccd4de;
    --n-400:#9aa6b4; --n-500:#6b7885; --n-600:#4e5a67; --n-700:#39434e; --n-800:#252d36; --n-900:#161c22;
    --accento:#1d5b86; --accento-scuro:#14425f; --accento-tenue:#e9f1f7;
    --ok:#17704a; --allerta:#a4540a; --errore:#a8231d; --ok-tenue:#e6f4ec; --allerta-tenue:#fdf2e3; --errore-tenue:#fbeceb;
    --bg:var(--n-50); --superficie:var(--n-0); --bordo:var(--n-200); --testo:var(--n-900); --tenue:var(--n-500);
    color-scheme:light;
  }
}
}