/* =============================================================
   Parea Sons — design token
   Unica fonte di verità per colore, tipografia, spazio, ritmo.
   Nessuna regola di layout qui dentro.
   ============================================================= */

:root {
  /* --- Colore -------------------------------------------------
     Ricavato dai quattro colori a listino dei capi in lino:
     Bianco, Blu, Beige, Tortora. Il rosso viene dallo stemma.   */
  --tortora-chiaro: #F2F0EC;   /* fondo pagina */
  --bianco-lino:    #FAF9F7;   /* superfici sollevate, header pieno */
  --inchiostro:     #1A1D24;   /* testo, filetti */
  --blu:            #2E3D52;   /* titoli, stati attivi, focus */
  --beige:          #B9AFA2;   /* SOLO bordi e filetti: su fondo chiaro dà 1,9:1 */
  --greige:         #6F675C;   /* testo secondario: 5,0:1 sul fondo, leggibile */
  --rosso-araldico: #DA2726;   /* un solo accento per schermata */

  /* L'oro sartoriale non è inventato: è #947c4e, l'ombra della corona
     nello stemma del logo.

     Vale la stessa regola del beige, e per lo stesso motivo: SOLO
     filetti e segni, e solo su fondo chiaro. Su fondo pagina dà
     3,5:1, sull'inchiostro 4,2:1 — abbastanza per un segno (la
     soglia è 3:1), non per una parola (che ne vuole 4,5). Sul rosso
     scende a 2,0:1 e sparisce: sul rosso i filetti sono di lino. */
  --oro:            #947C4E;

  /* --- Il rosso di lavoro --------------------------------------
     Il rosso dello stemma, #da2726, come testo su fondo pagina dà
     4,29:1: sotto la soglia di 4,5. Scurito quel tanto che basta
     diventa leggibile ovunque — 6,5:1 sul fondo pagina, 7,1 sul
     bianco lino, e come fondo di bottone regge il testo in lino a
     7,7:1. È lo stesso rosso, con un'ombra in più.

     QUESTO è il colore dell'interfaccia: bottoni, occhielli, stati
     attivi, messa a fuoco, ciò che si tocca. Il rosso puro resta ai
     segni minuti — il contatore della borsa, il cuore dei preferiti
     — dove la sua accensione è il punto.

     Il --blu NON è più un colore d'interfaccia. È il Blu Navy dei
     capi: sta sulle lastre, nelle palette e nel blocco scuro delle
     pagine di collezione, e basta. Un colore di prodotto usato per
     i bordi attivi e i bottoni è ciò che rendeva questo sito uguale
     a mille altri. L'interfaccia parla la lingua dello stemma. */
  --rosso:          #A81A19;
  --rosso-cupo:     color-mix(in srgb, var(--rosso) 78%, var(--inchiostro));

  /* derivati */
  --filetto:        color-mix(in srgb, var(--beige) 55%, transparent);
  --filetto-forte:  color-mix(in srgb, var(--inchiostro) 22%, transparent);
  --velo:           color-mix(in srgb, var(--inchiostro) 38%, transparent);

  /* --- I quattro colori a listino -----------------------------
     Questi non sono colori d'interfaccia: sono il prodotto. Sono i
     nomi che stanno nelle brochure e in data/products.json. Li
     usano le lastre di Inside, le bande della palette nei mondi e
     le pagine di collezione: tenerli qui evita tre copie diverse. */
  --capo-bianco:  #F4F2ED;   /* Bianco Ottico  */
  --capo-blu:     #2E3D52;   /* Blu Navy       */
  --capo-beige:   #C9B79B;   /* Beige Sabbia   */
  --capo-tortora: #A9A199;   /* Tortora Elegante */

  /* Il fondo delle fotografie di prodotto. Non è un colore scelto a
     tavolino: è quello che sta dentro i 24 scatti di assets/prodotti/,
     messo lì da tools/sfondo.swift, e sta qui perché le lastre ancora
     vuote debbano leggersi come la stessa superficie di quelle piene.
     Sta apposta fra i due chiari del sito — più chiaro di
     --tortora-chiaro, così la lastra si stacca dalla pagina, e più
     scuro di --bianco-lino, perché le alte luci del Bianco Ottico
     arrivano a 244-255 e su #FAF9F7 le spalle dei capi bianchi
     sparivano nel fondo. Se cambia qui, va rifatto lo shooting:
     python3 tools/prepara-scatti.py */
  --fondo-scatto: #F7F5F1;

  /* --- La trama del lino ---------------------------------------
     Ordito e trama a passo 6px, più una fiammatura a passo 17px:
     essendo 17 primo rispetto a 6 i reticoli non tornano mai in
     fase, e la tessitura non si vede mai ripetere. Chi la usa
     dichiara il proprio --filo, che è il colore del filato.       */
  --trama-lino:
    repeating-linear-gradient(90deg, var(--filo) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg,  var(--filo) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--filo) 45%, transparent) 0 1px,
      transparent 1px 17px);

  /* --- Tipografia --------------------------------------------
     Cinzel  : capitali romane, stessa lettera del payoff nel logo
     Cormorant: titoli e testo, alto contrasto
     Jost    : prezzi e micro-etichette, dove serve neutralità     */
  --font-display: "Cinzel", "Times New Roman", serif;
  --font-testo:   "Cormorant Garamond", "Times New Roman", serif;
  --font-dato:    "Jost", "Helvetica Neue", sans-serif;

  /* scala modulare, base 8 */
  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-16: 1rem;
  --t-20: 1.25rem;
  --t-32: 2rem;
  --t-48: 3rem;
  --t-72: 4.5rem;
  --t-96: 6rem;

  --tracking-largo:  0.18em;   /* voci di menu */
  --tracking-medio:  0.12em;   /* occhielli */
  --tracking-dato:   0.06em;   /* prezzi */

  /* --- Spazio, griglia 8px ----------------------------------- */
  --s-8:   0.5rem;
  --s-16:  1rem;
  --s-24:  1.5rem;
  --s-32:  2rem;
  --s-48:  3rem;
  --s-64:  4rem;
  --s-96:  6rem;
  --s-128: 8rem;

  --bordo-pagina: var(--s-32);
  --larghezza-max: 1440px;

  /* --- Movimento ---------------------------------------------
     Una sola curva per tutto il sito: uscita decisa, arrivo lento. */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-rapido: 200ms;
  --t-medio:  320ms;
  --t-lento:  420ms;
  --t-ampio:  500ms;

  /* --- Header -------------------------------------------------
     Altezze animate da variabile: nessun reflow del contenuto.

     Tre fasce sovrapposte: gli annunci, la riga del logo, la riga
     del menu. --header-h è la somma, e resta il numero che il resto
     del sito usa per sapere quanto spazio lasciare in cima. Allo
     scroll gli annunci se ne vanno e le due righe si stringono.   */
  --fascia-h: 40px;
  --riga-logo-h: 132px;
  --riga-nav-h: 52px;
  --riga-logo-h-ridotta: 56px;
  --riga-nav-h-ridotta: 44px;

  --header-h: calc(var(--fascia-h) + var(--riga-logo-h) + var(--riga-nav-h));
  --header-h-ridotto: calc(var(--riga-logo-h-ridotta) + var(--riga-nav-h-ridotta));
  --logo-h: 100px;   /* stemma + scritta; il payoff sta sotto, in Cinzel */
  --z-header: 100;
  --z-tendina: 90;
  --z-velo: 200;
  --z-pannello: 210;
}

@media (max-width: 1024px) {
  :root {
    --bordo-pagina: var(--s-24);
    --fascia-h: 36px;
    --riga-logo-h: 96px;
    --riga-nav-h: 48px;
    --riga-logo-h-ridotta: 52px;
    --riga-nav-h-ridotta: 42px;
    --logo-h: 68px;
  }
}

/* Sotto i 900px le voci non stanno più in fila: il menu torna a
   essere una maniglia e l'header a una riga sola. La riga del menu
   non esiste più, quindi la sua altezza va a zero. */
@media (max-width: 900px) {
  :root {
    --riga-nav-h: 0px;
    --riga-nav-h-ridotta: 0px;
  }
}

@media (max-width: 640px) {
  :root {
    --bordo-pagina: var(--s-16);
    --fascia-h: 34px;
    --riga-logo-h: 72px;
    --riga-logo-h-ridotta: 58px;
    --logo-h: 44px;
  }
}