SteUP_Dotnet/SteUp.Shared/wwwroot/css/tokens.css

/* =============================================================================
   SteUP — Token di design
   Implementa STILE_UI.md §2 (ruoli colore) e §3 (scale) sulla palette SteUP.
   Regola: nelle pagine si usano SOLO questi token. Un colore o un raggio
   scritto a mano in una schermata e' un difetto, non una scorciatoia.
   ========================================================================== */

:root {
    /* -------------------------------------------------------------------------
       COLORE — ruoli semantici (STILE_UI §2)
       La palette storica di SteUP resta intatta: corallo azione, navy ancora,
       azzurro tenue informativo. Sono stati aggiunti solo i ruoli che
       mancavano: workspace, surfaceMuted, divider, inkMuted e le coppie
       (foreground forte / superficie tenue) dei toni semantici.
       ---------------------------------------------------------------------- */

    /* Accento unico di azione. La sua rarita' e' cio' che lo rende un segnale. */
    --primary: #ec4c41;
    --primary-pressed: #d23a30;
    --on-primary: #ffffff;

    /* Ancora della struttura: testo forte, icone metrica, foreground su info. */
    --primary-dark: #002339;

    /* Superfici: lo sfondo pagina e' piu' freddo delle superfici di lavoro.
       Tre gradini netti, cosi' i pannelli staccano senza bisogno di ombre. */
    --workspace: #e9edf2;
    --surface: #ffffff;
    --surface-muted: #f4f6f9;
    --divider: #d9e0e8;

    /* Testo. Inchiostro pieno per la lettura in pieno sole (Regola del
       Contrasto da Sole): niente grigio chiaro sul corpo del testo. */
    --ink: #000000;
    --ink-muted: #465563; /* 8.3:1 su surface, 7.4:1 su workspace */

    /* --- Toni semantici -----------------------------------------------------
       Ogni tono e' una tripletta:
         -ink      foreground forte: testo e icone sopra la superficie tenue
         -surface  riempimento tenue: badge, pannelli, cerchi-icona dei dialog
         -solid    riempimento pieno: toast (testo bianco sopra)
       Gli -ink sono scelti per superare 4.5:1 sulla propria superficie tenue:
       i colori "puri" della palette restano per icone e riempimenti pieni,
       dove il contrasto di testo non e' in gioco.
       -------------------------------------------------------------------- */

    /* Danger — errori, azioni distruttive, priorita' massima */
    --danger-ink: #b3120c;
    --danger-surface: #fdeceb;
    --danger-solid: #e50000;

    /* Warning — attenzione, dati incompleti, bozze da completare */
    --warning-ink: #8a4f00;
    --warning-surface: #fdf0db;
    --warning-solid: #b26a00;

    /* Success — conferme, completamenti, sincronizzato */
    --success-ink: #10702f;
    --success-surface: #e4f5e9;
    --success-solid: #26b050;

    /* Info — stato informativo, pannelli di riepilogo, selezione */
    --info-ink: #002339;
    --info-surface: #dff2ff;
    --info-solid: #1877d8;

    /* Neutral — stati senza carica semantica */
    --neutral-ink: #465563;
    --neutral-surface: #f4f6f9;
    --neutral-solid: #465563;

    /* Focus da tastiera */
    --focus-ring: #258cfb;

    /* -------------------------------------------------------------------------
       SPAZIATURA (STILE_UI §3)
       ---------------------------------------------------------------------- */
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Micro-distanze derivate, d'uso frequente */
    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-10: 10px; /* tra le card di una lista */
    --space-14: 14px;
    --space-18: 18px; /* padding dei pannelli di testata */
    --space-20: 20px;
    --space-22: 22px;

    /* -------------------------------------------------------------------------
       RAGGI (STILE_UI §3)
       Superfici piu' arrotondate dei controlli; stati completamente stondati.
       ---------------------------------------------------------------------- */
    --radius-compact: 8px;
    --radius-control: 16px;
    --radius-surface: 20px;
    --radius-pill: 999px;

    /* -------------------------------------------------------------------------
       TIPOGRAFIA (STILE_UI §4)
       Scala fissa: si legge a colpo d'occhio, non fa effetto editoriale.
       ---------------------------------------------------------------------- */
    --font-sans: "Inter", "SF Pro Display", "Roboto", system-ui, sans-serif;

    --headline-md-size: 34px;
    --headline-md-height: 1.2;
    --headline-sm-size: 28px;
    --headline-sm-height: 1.25;
    --title-lg-size: 22px;
    --title-lg-height: 1.3;
    --title-md-size: 18px;
    --title-md-height: 1.35;
    --body-lg-size: 16px;
    --body-lg-height: 1.5;
    --body-md-size: 15px;
    --body-md-height: 1.45;
    --label-lg-size: 14px;
    --label-md-size: 13px;
    --label-sm-size: 12px;

    /* -------------------------------------------------------------------------
       MISURE STRUTTURALI
       ---------------------------------------------------------------------- */
    --appbar-height: 80px;
    --navbar-height: 68px;
    --touch-min: 44px;
    --button-height: 48px;
    --content-max: 920px;

    /* Spazio che le pagine lasciano in fondo per non finire sotto la barra
       flottante di navigazione (STILE_UI §6.15). */
    --nav-clearance: 116px;

    /* -------------------------------------------------------------------------
       MOVIMENTO
       Curve esponenziali in uscita: il movimento serve allo stato, mai alla
       scena. Durate da prodotto, l'utente e' dentro un compito.
       ---------------------------------------------------------------------- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 280ms;

    /* -------------------------------------------------------------------------
       PROFONDITA' — scala semantica, mai valori arbitrari
       Le superfici sono piatte (STILE_UI §1): questi livelli ordinano solo
       cio' che galleggia davvero.
       ---------------------------------------------------------------------- */
    --z-base: 0;
    --z-sticky: 10;
    --z-navbar: 20;
    --z-connection: 30;
    --z-overlay: 40;
    --z-modal: 50;
    --z-toast: 60;

    /* L'unica ombra del sistema: il toast (STILE_UI §6.9). */
    --shadow-toast: 0 6px 20px rgba(0, 0, 0, 0.24);

    /* Breakpoint (STILE_UI §3) — documentati qui, usati nelle media query:
       rail 720px · twoColumn 900px · contentMax 1180px */
}

/* =============================================================================
   Gradino compatto — schermi stretti (≤380px)

   Il terminale da campo (Honeywell EDA52) ha 360 punti logici di larghezza,
   molto meno dei telefoni per cui la scala di STILE_UI è tarata: a misura
   piena i titoli si troncano, il testo va a capo e in una schermata entra
   pochissimo lavoro. Qui la scala scende di un gradino — le proporzioni e i
   rapporti restano quelli del documento, cambia solo la taglia.

   È l'"Adattamento locale" del §8: i componenti si riorganizzano sotto le
   soglie invece di pretendere lo spazio che non c'è.
   ========================================================================== */

@media (max-width: 380px) {
    :root {
        --headline-md-size: 28px;
        --headline-sm-size: 22px;
        --title-lg-size: 18px;
        --title-md-size: 16px;
        --body-lg-size: 15px;
        --body-md-size: 14px;
        --label-lg-size: 13px;
        --label-md-size: 12px;
        --label-sm-size: 11px;

        --space-lg: 20px;
        --space-xl: 24px;
        --space-18: 14px;
        --space-20: 16px;
        --space-22: 18px;

        --appbar-height: 64px;
        --button-height: 44px;
        --navbar-height: 62px;
        --nav-clearance: 104px;
    }
}