/* =========================================================================
   SARTORI TRADE — Fondamenta del design system
   Un solo posto per colori, testo, spazi e raggi. Nessun altro foglio del
   tema deve contenere un colore scritto a mano: se serve un valore nuovo,
   nasce qui come variabile.
   I colori del marchio sono quelli veri, presi dal CSS del sito Magento:
   blu #004996 e azzurro #009fe3.
   ========================================================================= */

:root {
    /* --- Marchio --- */
    --sa-blu:            #004996;
    --sa-blu-scuro:      #00306a;
    --sa-blu-chiaro:     #009fe3;
    --sa-blu-tenue:      #e8f1fa;

    /* Arancione dell'azione d'acquisto: sul sito originale e' il colore del
       pulsante "Acquista", quindi non e' decorativo — porta il gesto che fa
       incassare. Su bianco sta a 2,3:1: va usato come FONDO con testo scuro,
       mai come colore di un testo su chiaro. */
    /* Plancia dei marchi di pagamento: i loghi Visa/Mastercard sono PNG
       trasparenti a colore fisso, il blu Visa sparirebbe su fondo scuro.
       Questa superficie resta CHIARA in entrambi i temi, per scelta. */
    --sa-plancia-marchi:  #ffffff;
    --sa-su-plancia:      #14181f;

    --sa-azione:         #ff9c00;
    --sa-azione-scuro:   #d97e00;
    --sa-su-azione:      #1a1200;

    /* --- Inchiostro e superfici --- */
    --sa-inchiostro:     #14181f;   /* testo principale, 15.4:1 su bianco */
    --sa-inchiostro-2:   #4a5361;   /* testo secondario, 7.4:1 su bianco */
    --sa-inchiostro-3:   #6b7480;   /* testo di servizio, 4.8:1 su bianco */
    --sa-superficie:     #ffffff;
    --sa-superficie-2:   #f6f8fa;   /* fondo pagina e righe alterne */
    --sa-superficie-3:   #eef1f5;
    --sa-bordo:          #dde3ea;
    --sa-bordo-forte:    #c3ccd7;

    /* --- Stati --- */
    --sa-ok:             #157347;
    --sa-attenzione:     #9a6700;
    --sa-errore:         #c02626;
    --sa-ok-tenue:       #e8f5ee;
    --sa-attenzione-tenue:#fdf6e3;
    --sa-errore-tenue:   #fdeaea;

    /* --- Tipografia ---
       Tutto in rem: la radice non e' fissata da nessuna regola, cosi' il testo
       segue la preferenza del browser di chi legge. Le spaziature restano in px
       apposta — 44px e' una misura di dito, non di testo. */
    --sa-font:           "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sa-font-num:       "Inter", ui-monospace, "SF Mono", Menlo, monospace;

    --sa-t-xs:           0.75rem;   /* 12 — etichette, note */
    --sa-t-sm:           0.875rem;  /* 14 — dati di tabella */
    --sa-t-base:         1rem;      /* 16 — corpo, mai sotto su mobile */
    --sa-t-md:           1.125rem;  /* 18 */
    --sa-t-lg:           1.375rem;  /* 22 */
    --sa-t-xl:           1.75rem;   /* 28 */
    --sa-t-2xl:          2.25rem;   /* 36 */

    --sa-riga:           1.6;       /* corpo */
    --sa-riga-stretta:   1.25;      /* titoli */

    /* --- Ritmo verticale: scala da 4px --- */
    --sa-s1:  4px;  --sa-s2:  8px;  --sa-s3: 12px;  --sa-s4: 16px;
    --sa-s5: 24px;  --sa-s6: 32px;  --sa-s7: 48px;  --sa-s8: 64px;

    /* --- Forma --- */
    --sa-raggio:         6px;
    --sa-raggio-lg:      10px;
    --sa-ombra:          0 1px 2px rgba(20, 24, 31, .06), 0 1px 3px rgba(20, 24, 31, .08);
    --sa-ombra-alta:     0 4px 12px rgba(20, 24, 31, .10);

    /* --- Bersaglio minimo del dito --- */
    --sa-tocco:          44px;

    /* --- Movimento: 150-300ms, in uscita piu' rapido che in entrata --- */
    --sa-durata:         180ms;
    --sa-durata-uscita:  120ms;
    --sa-curva:          cubic-bezier(.2, .8, .3, 1);

    /* --- Impilamento: una scala sola, dichiarata --- */
    --sa-z-base:     1;
    --sa-z-sticky:  20;
    --sa-z-testata: 40;
    --sa-z-velo:   100;
    --sa-z-modale: 110;
}

/* Tema scuro: DISATTIVATO di default, per scelta.
   Prima si accendeva da solo con `prefers-color-scheme: dark`, cioe' su
   qualunque telefono impostato in modalita' scura — e chi apriva il sito da
   li' vedeva un catalogo su fondo nero, senza aver chiesto nulla. Su un
   negozio B2B il fondo dev'essere bianco e uguale per tutti: le foto degli
   articoli si leggono su chiaro, e il colore del marchio e' tarato sul bianco.

   La palette resta scritta e mantenuta: si accende SOLO in modo esplicito,
   mettendo data-tema="scuro" sull'elemento radice. Il giorno che si volesse
   un interruttore in pagina, e' gia' tutto pronto. */
:root[data-tema="scuro"] {
        --sa-blu:          #4d9fe8;
        --sa-blu-scuro:    #7cb9ee;
        --sa-blu-chiaro:   #5cc4f5;
        --sa-blu-tenue:    #16263a;

        --sa-azione:       #ffab2e;
        --sa-azione-scuro: #e08f16;
        --sa-su-azione:    #1a1200;

        --sa-inchiostro:   #e9edf2;
        --sa-inchiostro-2: #aeb8c4;
        --sa-inchiostro-3: #8b95a2;
        --sa-superficie:   #14181f;
        --sa-superficie-2: #1b212a;
        --sa-superficie-3: #232b36;
        --sa-bordo:        #2d3641;
        --sa-bordo-forte:  #3d4854;

        --sa-ok:           #5cc98d;
        --sa-attenzione:   #e0b155;
        --sa-errore:       #f08a8a;
        --sa-ok-tenue:     #16281f;
        --sa-attenzione-tenue:#2a2418;
        --sa-errore-tenue: #2c1a1a;

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

/* =========================================================================
   PREFERENZE DI SISTEMA
   Non solo il movimento: chi chiede meno trasparenza o piu' contrasto va
   servito allo stesso modo.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    :root { --sa-velo-sfocatura: none; }
    .sa-testata--fissa, .sa-velo { backdrop-filter: none !important; }
}

@media (prefers-contrast: more) {
    :root {
        --sa-inchiostro-2: #2b323c;
        --sa-inchiostro-3: #3d4550;
        --sa-bordo:        #9aa5b1;
        --sa-bordo-forte:  #6b7480;
    }
    a, button { text-decoration-thickness: 2px; }
}