/* =============================================================================
   scatole.com — DIREZIONE "BIANCO CANDIDO" · FONDAMENTA
   -----------------------------------------------------------------------------
   Sostituisce la tavolozza scura "Officina", scartata dal proprietario.
   La copia scura resta in /root/scatole-restore/fondamenta-SCURE-backup.css

   PERCHE' BASTA CAMBIARE QUESTO FILE
   I tre fogli che seguono (01 base, 02 prodotto, 03 negozio) sono scritti con
   SOLI gettoni: nessun colore letterale in nessuna regola. Ribaltando i valori
   qui, ribalta tutto il sito. E' il motivo per cui avevo imposto quella
   disciplina prima di far partire il lavoro.

   L'IDEA
   Bianco candido. Non avorio, non crema: bianco puro come una carta appena
   tagliata. La luce fa il lavoro che sul fondo scuro facevano i bordi — dove
   prima c'era una linea, adesso c'e' un'ombra morbida o un semplice cambio di
   tono. Angoli ammorbiditi, respiro largo, petrolio come unico colore.
   ========================================================================== */

:root {

  /* --- TERRENI ---------------------------------------------------------
     Su fondo chiaro l'ordine si INVERTE rispetto alla versione scura:
     --sc-fondo e' il piu' chiaro, gli "incassi" sono leggermente piu' scuri. */
  --sc-fondo:      #FFFFFF;   /* pagina: bianco puro, come chiesto */
  --sc-pannello:   #FBFBFC;   /* barre, intestazione, piede */
  --sc-incasso:    #F4F6F7;   /* aree immagine, celle, campi */
  --sc-rilievo:    #EDF0F2;   /* righe alternate, stati inattivi */

  /* --- LINEE — appena percettibili: su bianco un bordo marcato incupisce -- */
  --sc-linea:      #ECEEF1;
  --sc-linea-2:    #DDE1E6;
  --sc-quota:      #C6CCD3;

  /* Il reticolo da tavolo da disegno SPARISCE: apparteneva all'altra
     direzione. Lo lascio dichiarato ma trasparente, cosi' i tre fogli che lo
     richiamano non si rompono e non serve modificarli. */
  --sc-griglia:    transparent;
  --sc-reticolo:   none;

  /* --- INCHIOSTRI — contrasti calcolati su fondo bianco ------------------ */
  --sc-ink:        #0F1115;   /* titoli            circa 19:1  AAA */
  --sc-ink-2:      #3F4750;   /* testo corrente    circa 9,6:1 AAA */
  --sc-ink-3:      #616A75;   /* secondario        circa 6,0:1 AA+ */
  /* CORRETTO: era #79828D, dichiarato 4,5:1 ma MISURATO 3,90 su bianco e
     3,73 su carta — cioe' bocciato AA. Scurito finche' passa davvero. */
  /* Scurito DUE volte. Era #79828D (3,90 su bianco: bocciato), poi #6B747F
     (4,74 su bianco ma 4,37 su --sc-incasso e 4,19 su --sc-rilievo: ancora
     bocciato sui grigi della tavolozza). Ora passa su tutti e tre i fondi. */
  --sc-ink-4:      #616A76;   /* 5,3:1 su bianco · 4,9:1 su incasso · 4,7:1 su rilievo */

  /* Petrolio intermedio: fra il pieno (--sc-mar) e il velo non c'era niente.
     Serve per fondi tenui che devono comunque reggere del testo scuro. */
  --sc-mar-fondo:  #D6EAEC;

  /* --- MARCHIO ----------------------------------------------------------
     Il petrolio #2F8C98 su BIANCO fa 3,94:1 — sotto la soglia AA per il testo
     normale (4,5:1). Regola, come nella versione scura ma rovesciata:
       fondo pieno  -> --sc-mar        (col testo bianco sopra: 3,94:1,
                                        va bene solo per testo grande/grassetto)
       testo, link  -> --sc-mar-testo  (#226E78, 5,88:1 su bianco: passa AA) */
  --sc-mar:        #2F8C98;
  --sc-mar-testo:  #226E78;
  --sc-mar-vivo:   #226E78;   /* i fogli 01/02/03 lo usano per testo e tratti:
                                 qui DEVE essere la variante scura, non chiara */
  --sc-mar-scuro:  #1A555E;   /* passaggio del mouse su fondo pieno */
  --sc-mar-ombra:  #FFFFFF;   /* testo SOPRA un fondo --sc-mar: bianco */
  --sc-mar-velo:   #E9F3F4;   /* velo tenue: selezione, evidenza */

  /* --- SEMANTICI --------------------------------------------------------- */
  --sc-urg:        #C41239;   /* sconto, urgenza, errore   circa 6,3:1 */
  --sc-urg-fondo:  #FDF0F3;
  --sc-ok:         #10704F;   /* disponibile, spedizione gratuita  circa 5,9:1 */
  --sc-ok-fondo:   #EAF6F1;

  /* --- CARTA E STELLE ---------------------------------------------------- */
  /* CORRETTO dopo la segnalazione dell'agente: valeva #FFFFFF, identico a
     --sc-fondo, quindi non poteva fare il suo mestiere — dare un piano di
     appoggio ai campioni. Ora e' un bianco appena caldo da campionario: le
     piastrelle sembrano cartoncino invece che un buco nella pagina. */
  --sc-carta:      #FAFAF8;
  --sc-carta-ink:  #0F1115;

  /* Regola scritta finora solo nei commenti, ora ha un nome:
     --sc-mar (#2F8C98) su bianco fa 3,94:1, quindi il PIENO petrolio si usa
     SOLO sotto testo grande e grassetto (soglia 3:1). Sotto testo piccolo si
     usa --sc-mar-testo. Questo gettone dice quale dei due prendere. */
  --sc-mar-pieno-ok-da: 19px;   /* sotto questa misura, niente fondo pieno */
  --sc-stella:     #C8860D;   /* ambra scurita per reggere su bianco */

  /* --- CARATTERI (invariati: sono quelli del sito) ----------------------- */
  --sc-disp: Lato, "Helvetica Neue", Arial, sans-serif;
  --sc-testo: Poppins, system-ui, -apple-system, sans-serif;
  --sc-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- SCALA TIPOGRAFICA -------------------------------------------------- */
  --sc-t-mono:  clamp(10.5px, .18vw + 10px, 11.5px);
  --sc-t-p:     clamp(15px, .25vw + 14.2px, 16.5px);
  --sc-t-campo: 16px;         /* fisso: sotto i 16px iPhone ingrandisce */
  --sc-t-h3:    clamp(1.05rem, .5vw + .95rem, 1.3rem);
  --sc-t-h2:    clamp(1.6rem, 1.8vw + 1.1rem, 2.3rem);
  --sc-t-h1:    clamp(2.2rem, 4vw + 1rem, 4rem);

  /* --- SPAZI: piu' larghi. Il bianco vuole respiro, altrimenti sembra vuoto
         invece che arioso. -------------------------------------------------- */
  --sc-s1: 4px;  --sc-s2: 8px;  --sc-s3: 14px; --sc-s4: 20px;
  --sc-s5: 28px; --sc-s6: 40px; --sc-s7: 56px; --sc-s8: 76px; --sc-s9: 104px;

  /* --- ANGOLI: morbidi. La direzione scura li voleva vivi; questa no. ----- */
  --sc-r: 12px;

  /* --- OMBRE — su bianco fanno il lavoro che sul fondo scuro facevano i
         bordi. A strati, mai un alone grigio unico. ------------------------ */
  --sc-ombra-1: 0 1px 2px rgb(15 17 21 / .04), 0 2px 6px rgb(15 17 21 / .04);
  --sc-ombra-2: 0 2px 4px rgb(15 17 21 / .04), 0 10px 24px rgb(15 17 21 / .07);
  --sc-ombra-3: 0 4px 10px rgb(15 17 21 / .05), 0 22px 48px rgb(15 17 21 / .11);
  --sc-ombra-mar: 0 8px 22px rgb(47 140 152 / .28);

  /* --- MOVIMENTO ---------------------------------------------------------- */
  --sc-curva: cubic-bezier(.22, 1, .36, 1);
  --sc-veloce: 150ms;
  --sc-medio:  280ms;
}

/* =============================================================================
   LE IMMAGINI PRODOTTO NON VANNO PIU' INVERTITE
   -----------------------------------------------------------------------------
   Sul fondo scuro i disegni delle scatole (tratto scuro su chiaro) andavano
   ribaltati per essere visibili. Su bianco sono gia' giusti come sono nati:
   l'inversione va SPENTA, non solo attenuata.
   Lascio le classi dichiarate perche' i tre fogli le richiamano: renderle
   inerti qui evita di dover riscrivere mille righe altrove.
   ========================================================================== */
.sc-tratto,
.sc-tratto img,
.sc-vero,
.sc-vero img {
  filter: none;
}

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

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--sc-mar-testo);
  outline-offset: 2px;
}

/* =============================================================================
   CORREZIONI DI RIBALTAMENTO
   -----------------------------------------------------------------------------
   Tre cose che il solo scambio di gettoni non puo' sistemare, perche' i fogli
   01/02/03 le hanno scritte pensando a un fondo scuro.
   ========================================================================== */

/* 1. Il corpo pagina: i fogli mettevano il reticolo su #main. Ora e' `none`,
      ma il fondo va dichiarato esplicito o resta quello del tema. */
body, #main {
  background-color: var(--sc-fondo);
}

/* 2. Le aree immagine dei prodotti erano "incassi" scuri col reticolo.
      Su bianco diventano un piano appena percettibile con la scatola sopra. */
#main .elementor-widget-image img,
#main li.product img,
#main .attachment-woocommerce_thumbnail {
  mix-blend-mode: normal;
}

/* 3. Gli sfondi bianchi "carta" che i fogli avevano introdotto per non
      invertire le foto vere non servono piu': su bianco sparirebbero in un
      rettangolo bianco su bianco. Li porto a incasso, cosi' la foto resta
      staccata dal fondo pagina. */
.sc-foglio,
.sc-carta-fondo {
  background-color: var(--sc-incasso);
  border: 1px solid var(--sc-linea);
}