/*
    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.

    Contrasto alzato il 25/09/2026 su richiesta: testi, righe e fondi degli stati piu' decisi.

    Chiaro, su superficie bianca:  allarme 9,38 - attesa 7,55 - fatto 8,19 - verde 6,52 - blu 8,26
                                   viola 9,57 - grigio 8,72 - grigio-tenue 5,50 - link 10,19
    Scuro, su superficie #1a201c:  allarme 8,41 - attesa 10,37 - fatto 9,53 - verde 7,65 - blu 9,00
                                   viola 8,77 - grigio 9,30 - grigio-tenue 5,87 - inchiostro 15,36

    Il 25/09/2026, poco dopo, grigio-tenue, bordi e righe alterne sono tornati piu' lievi: nelle
    tabelle il contrasto era troppo. Il grigio-tenue resta sopra 4,5:1 anche sulla riga alterna
    (5,05 in chiaro, 5,41 in scuro).
    Il colore di uno stato sul suo fondo (le etichette): mai sotto 6:1 in chiaro, 7,5:1 in scuro.

    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: oltre 10:1, 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 {
    /* le persone che scrivono insieme in un documento (15/10/2026): il colore del cursore e del nick di ognuno.
       Scuri in tutti e due i temi: sopra ci va il testo chiaro della barra (--barra-testo), contrasto almeno 4,5:1 */
    --persona-0: #c0392b;
    --persona-1: #2471a3;
    --persona-2: #1e8449;
    --persona-3: #7d6608;
    --persona-4: #7d3c98;
    --persona-5: #a04000;
    --persona-6: #117a65;
    --persona-7: #a93226;
    --persona-8: #2e4053;
    --persona-9: #b03a2e;

    /* identita' */
    --verde: #2e6a30;
    --verde-scuro: #1f4a22;
    --verde-tenue: #dcebdc;
    --link: #1f4a22;
    --link-sopra: #0f2e13;
    /* il testo sopra l'accento pieno (i pulsanti primari) */
    --su-accento: #ffffff;

    /* superfici e testo */
    --inchiostro: #0e1512;
    --grigio: #454d48;
    --grigio-tenue: #636b65;
    --riga: #d9dad3;
    /*
        I piani, dal 26/09/2026: tutto bianco con i soli bordi non si leggeva. Ogni piano ha il suo
        fondo: la barra in alto verde scuro, la laterale grigia, la pagina grigio chiaro, e sopra
        le schede bianche. Le schede si staccano col colore, il bordo resta solo a rifinire.
    */
    --carta: #efeee8;
    --superficie: #ffffff;
    --superficie-alt: #fbfaf7;

    /* la barra in alto (e la testa della laterale, che le sta accanto): una fascia sola, verde */
    --barra-fondo: #1f4a22;
    --barra-testo: #ffffff;
    --barra-testo-tenue: #c9dfca;
    --barra-sopra: rgba(255, 255, 255, .14);

    /* la laterale: un grigio piu' deciso della pagina, cosi' il menu e' un piano a parte */
    --laterale-fondo: #e4e3db;
    --laterale-sopra: #d6d5cc;

    /* la riga di intestazione delle tabelle: una fascia, non una riga come le altre */
    --testa-tabella: #e6e4db;

    /* la fascia della riga di testa di ogni voce (data, tipo, chi): lieve, dice solo dove comincia */
    --testa-voce: #f9f8f4;

    /* la barra di testa di una scheda negli elenchi a riquadri (il lead, il sito): piu' decisa delle voci */
    --testa-scheda: #e9e7de;

    /* stati: il colore non basta mai da solo, va sempre con glifo o etichetta */
    --allarme: #8a1a13;
    --allarme-fondo: #f4d9d7;
    --attesa: #6e4f00;
    --attesa-fondo: #f3e6c3;
    --fatto: #235a27;
    --fatto-fondo: #d7e8d7;

    /*
        Le tinte dei tipi di voce, dal calendario: blu gli appuntamenti, viola gli appunti da
        confermare. Con allarme, attesa e fatto fanno la tavolozza degli stati; misurate come le
        altre sopra 4,5:1 sul loro fondo (blu 5,3, viola 6,3; nel tema scuro 6,8 tutti e due).
    */
    --blu: #1a4f8c;
    --blu-fondo: #d8e6f6;

    /*
        Gli eventi del Google Calendar di chi guarda, sopra quelli di WK (26/09/2026): un verde acqua
        che non e' di nessuno stato. Misurato: 6,26 sul suo fondo e 7,71 sulla superficie in chiaro,
        7,72 e 9,88 in scuro; l'inchiostro sul fondo 15,0 e 12,0. Con la "G" accanto, mai da solo.
    */
    --google: #0b5c63;
    --google-fondo: #d5eced;

    /*
        La scala del ritardo, sei gradini come in WK (Coda.aspx: verde, verde medio, giallo,
        arancio, rosso, rosso intenso): quanto e' fermo un processo, quanto e' in ritardo una
        consegna. I fondi sono quelli di WK ammorbiditi, i testi scuri quanto serve per stare sopra
        4,5:1 su ognuno.
    */
    --scala-1: #235a27;
    --scala-1-fondo: #d7e8d7;
    --scala-2: #1f4a22;
    --scala-2-fondo: #c4dfbd;
    --scala-3: #634700;
    --scala-3-fondo: #f7e6a6;
    --scala-4: #723700;
    --scala-4-fondo: #fbd0a6;
    --scala-5: #841a14;
    --scala-5-fondo: #f7c3bf;
    --scala-6: #ffffff;
    --scala-6-fondo: #9b1f18;
    --viola: #57308a;
    --viola-fondo: #e6dcf4;

    /*
        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: #e6f1e6;
    --riga-persa: #f9e8e6;

    /* una riga si' e una no negli elenchi: appena piu' scura della superficie, meno della carta */
    --riga-alterna: #f7f6f2;

    /*
        caratteri: uno solo in tutto il sistema (02/10/2026, deciso dal committente). Numeri e date
        prendono risalto col peso e con le cifre a larghezza fissa (tabular-nums, in .mono), non con un
        altro carattere. --mono resta come nome, ma e' il carattere dell'interfaccia, anche quello scelto
        nello Stile.
    */
    --testo: 'Archivo', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
    --mono: var(--testo);

    /* scala tipografica, densa da strumento di lavoro */
    --t-micro: 13px;
    --t-piccolo: 14px;
    --t-base: 15px;
    --t-medio: 17px;
    --t-grande: 21px;
    --t-titolo: 26px;

    /* l'interlinea del testo corrente: lo stile dell'utente la puo' allargare o stringere */
    --interlinea: 1.45;

    /* 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);

    /*
        Il fondo di appunti, richiami e appuntamenti, da fare e fatti (28/09/2026): eventi del
        calendario, etichette e righe dello storico del lead. Rimandano ai colori del tema, quindi
        seguono chiaro e scuro; lo stile di una persona li puo' cambiare uno per uno (Stili.ColoriVoci).
    */
    --voce-appunto: var(--superficie-alt);
    --voce-richiamo: var(--attesa-fondo);
    --voce-appuntamento: var(--blu-fondo);
    --voce-confermare: var(--viola-fondo);

    /* il primo appuntamento e il primo richiamo di una trattativa: la stessa famiglia, piu' decisa */
    --voce-primo-appuntamento: color-mix(in srgb, var(--blu) 20%, var(--blu-fondo));
    --voce-primo-richiamo: color-mix(in srgb, var(--attesa) 20%, var(--attesa-fondo));
    --voce-appunto-fatto: var(--fatto-fondo);
    --voce-richiamo-fatto: var(--fatto-fondo);
    --voce-appuntamento-fatto: var(--fatto-fondo);
}

[data-theme="dark"] {
    --verde: #7cc07e;
    --verde-scuro: #94d296;
    --verde-tenue: #223325;
    --link: #a6e0a8;
    --link-sopra: #c8f0c9;
    --su-accento: #0e1512;

    --inchiostro: #f4f7f5;
    --grigio: #bcc4bf;
    --grigio-tenue: #939c96;
    --riga: #323b35;
    --carta: #111613;
    --superficie: #1a201c;
    --superficie-alt: #202722;

    --barra-fondo: #1d3321;
    --barra-testo: #f4f7f5;
    --barra-testo-tenue: #b7ccb9;
    --barra-sopra: rgba(255, 255, 255, .10);

    --laterale-fondo: #151b17;
    --laterale-sopra: #222a24;

    --testa-tabella: #262e28;
    --testa-voce: #1f2621;
    --testa-scheda: #2b342e;

    --allarme: #ff9f97;
    --allarme-fondo: #3a1d1b;
    --attesa: #f0c860;
    --attesa-fondo: #372c12;
    --fatto: #92d495;
    --fatto-fondo: #1f3521;

    --blu: #98c3f0;
    --blu-fondo: #1c2d42;

    --google: #7fd6d9;
    --google-fondo: #16363a;

    --scala-1: #92d495;
    --scala-1-fondo: #1f3521;
    --scala-2: #b2e2b2;
    --scala-2-fondo: #26432a;
    --scala-3: #f2d27e;
    --scala-3-fondo: #3a3115;
    --scala-4: #f7b97f;
    --scala-4-fondo: #402a12;
    --scala-5: #ffaba4;
    --scala-5-fondo: #45211e;
    --scala-6: #ffffff;
    --scala-6-fondo: #a3231b;
    --viola: #cbb2ec;
    --viola-fondo: #2e2340;

    --riga-vinta: #1f2c21;
    --riga-persa: #2f201f;

    --riga-alterna: #202722;

    --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;
    }
}

/*
    Sul telefono ogni campo e pulsante e' piu' basso: 28px invece di 32. Sullo schermo stretto lo
    spazio verticale e' quello che manca, e 28px restano comodi per il dito con i margini che hanno
    intorno. La scritta resta della stessa misura: sotto i 16px, alcuni telefoni ingrandirebbero la
    pagina appena si tocca una casella.
*/
@media (max-width: 900px) {
    /* il titolo della pagina piu' piccolo sul telefono (08/10/2026): a 26px "Lead e chiamate" e i suoi pulsanti non ci stavano */
    :root { --alto-controllo: 28px; --t-titolo: 20px; }
}