/* ===================================================================
   FILE: css/eduflow_tokens.css
   Linguaggio visivo del gestionale, in variabili riusabili.

   I valori vengono dal cruscotto segreteria (classi cr-* in fondo a
   css/dashboard.css), che e' il primo pezzo di questo linguaggio andato
   in produzione. Il principio: sobrio e professionale, perche' queste
   pagine le usano le segreterie tutto il giorno.

   Va caricato PRIMA del CSS di pagina, e insieme a css/fonts.css:
     <link rel="stylesheet" href="/css/fonts.css">
     <link rel="stylesheet" href="/css/eduflow_tokens.css">
   =================================================================== */

:root {
    /* --- Tipografia: due ruoli --------------------------------------
       Public Sans per l'interfaccia (nasce per la pubblica
       amministrazione), IBM Plex Mono per i DATI: numeri di protocollo,
       date, conteggi. I fallback servono se i woff2 non arrivano. */
    --ef-font-ui:   'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --ef-font-dato: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* --- Neutri virati sul freddo, non grigi puri ------------------- */
    --ef-fondo:        #eef1f5;
    --ef-superficie:   #ffffff;
    --ef-superficie-2: #f6f8fa;
    --ef-bordo:        #dfe5ec;
    --ef-bordo-forte:  #c6d1dd;

    --ef-testo:        #1c2833;
    --ef-testo-2:      #55677a;
    --ef-testo-3:      #8496a8;

    /* --- Accento ----------------------------------------------------
       #2f7fc0 e non #3498db: quest'ultimo non regge il contrasto sul
       bianco per il testo piccolo. */
    --ef-accento:       #2f7fc0;
    --ef-accento-scuro: #24638f;
    --ef-accento-tenue: #e8f1f8;

    /* --- Stato: riservato, mai usato per decorare -------------------
       Ogni stato ha il suo fondo tenue. Ricorda: lo stato non e' MAI
       solo colore, va sempre accompagnato da un'etichetta testuale. */
    --ef-critico:        #b3261e;
    --ef-critico-tenue:  #fbeae9;
    --ef-attenzione:     #a45c00;
    --ef-attenzione-tenue:#fdf3e4;
    --ef-ok:             #16704a;
    --ef-ok-tenue:       #e7f4ee;

    /* --- Forma ------------------------------------------------------ */
    --ef-raggio:    10px;
    --ef-raggio-lg: 14px;
    --ef-ombra:     0 1px 2px rgba(28, 40, 51, 0.06);
    --ef-ombra-alta:0 4px 16px rgba(28, 40, 51, 0.10);

    /* --- Target touch: >= 44px anche su desktop --------------------- */
    --ef-touch: 44px;
}

/* Cifre sempre incolonnate ovunque si mostri un dato */
.ef-dato {
    font-family: var(--ef-font-dato);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Intestazione di sezione: piccola, maiuscola, spaziata */
.ef-sezione-titolo {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ef-testo-2);
}