/*
    I valori del sistema. Nessun colore e nessuna misura va scritta altrove:
    se un componente ha bisogno di un valore che qui non c'e', si aggiunge qui.

    Contrasti verificati WCAG 2.1 AA per il testo normale (soglia 4,5:1), misurati e non stimati.

    Chiaro, su superficie bianca:  allarme 7,46 - attesa 5,43 - fatto 6,42 - verde 5,21
                                   grigio 5,96 - grigio-tenue 4,70
    Scuro, su superficie #1a201c:  allarme 6,84 - attesa 8,65 - fatto 6,79 - verde 6,04
                                   grigio 7,11 - grigio-tenue 5,31 - inchiostro 13,89

    Il grigio-tenue e' il valore piu' stretto dei due temi: chi lo cambia lo ricalcoli.

    I link hanno un colore loro (--link), piu' scuro del verde dei pulsanti: 7,6:1 in chiaro, quindi
    AAA anche sul testo piccolo delle tabelle, e sempre sottolineati dentro il contenuto (WCAG 1.4.1:
    un link non si riconosce dal solo colore). Il verde pieno resta per le azioni primarie e il fuoco.
*/

:root {
    /* identita' */
    --verde: #3a7a3c;
    --verde-scuro: #2a5a2c;
    --verde-tenue: #eaf1ea;
    --link: #2a5a2c;
    --link-sopra: #16391a;

    /* superfici e testo */
    --inchiostro: #16211c;
    --grigio: #5c665f;
    --grigio-tenue: #6d766f;
    --riga: #dfe0da;
    --carta: #f6f5f0;
    --superficie: #ffffff;
    --superficie-alt: #fbfaf7;

    /* stati: il colore non basta mai da solo, va sempre con glifo o etichetta */
    --allarme: #a3231b;
    --allarme-fondo: #f7e6e5;
    --attesa: #8a6300;
    --attesa-fondo: #f7f0dd;
    --fatto: #2f6b33;
    --fatto-fondo: #e6f0e6;

    /*
        Le tinte delle righe: molto piu' tenui dei fondi di stato, perche' coprono una riga intera
        e non un'etichetta. Sono anche piu' chiare della riga sotto il puntatore, cosi' passandoci
        sopra si vede lo stesso quale riga si sta guardando.
    */
    --riga-vinta: #f1f7f1;
    --riga-persa: #fcf3f2;

    /* caratteri: Archivo per l'interfaccia, mono per numeri e codici */
    --testo: 'Archivo', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
    --mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;

    /* scala tipografica, densa da strumento di lavoro */
    --t-micro: 11px;
    --t-piccolo: 12px;
    --t-base: 13px;
    --t-medio: 15px;
    --t-grande: 19px;
    --t-titolo: 24px;

    /* spaziature: multipli di 4, niente valori a caso */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;

    --raggio: 4px;

    /* l'altezza di OGNI campo e pulsante: affiancati devono stare sulla stessa riga, ovunque */
    --alto-controllo: 32px;
    --raggio-grande: 8px;

    --ombra: 0 1px 2px rgba(22, 33, 28, .08), 0 1px 3px rgba(22, 33, 28, .06);
    --ombra-alta: 0 4px 12px rgba(22, 33, 28, .12), 0 2px 4px rgba(22, 33, 28, .08);

    /* misure dell'impianto */
    --laterale: 236px;
    --laterale-stretta: 56px;
    --barra-alta: 48px;
    --barra-basso: 56px;

    --transizione: 140ms cubic-bezier(.4, 0, .2, 1);
}

[data-theme="dark"] {
    --verde: #6aab6c;
    --verde-scuro: #82c184;
    --verde-tenue: #1e2a20;
    --link: #8fd092;
    --link-sopra: #b5e6b7;

    --inchiostro: #e8ece9;
    --grigio: #a3aca6;
    --grigio-tenue: #8b948e;
    --riga: #2a332d;
    --carta: #12160f;
    --superficie: #1a201c;
    --superficie-alt: #202722;

    --allarme: #f08a82;
    --allarme-fondo: #2e1b1a;
    --attesa: #e0b64d;
    --attesa-fondo: #2b2415;
    --fatto: #7dbd80;
    --fatto-fondo: #1b2a1c;

    --riga-vinta: #1b241c;
    --riga-persa: #261c1b;

    --ombra: 0 1px 2px rgba(0, 0, 0, .4);
    --ombra-alta: 0 4px 12px rgba(0, 0, 0, .5);
}

/* chi ha chiesto meno animazioni ne riceve meno */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transizione: 0ms;
    }
}