/* tokens.css — design genome furniture_showroom. Showroom d'arredo caldo e classico: carta bianca, bande
   crema, titoli bordeaux e un ORO di marca. Vocabolario CHIUSO di token semantici: la sorgente da cui
   deriva theme.json. Niente valori fuori da qui.

   ⚠ CONTRATTO DELL'ORO (misurato, non stimato). #C9AB81 su bianco dà 2,18 e su crema 1,97: NON può
   portare testo su fondo chiaro — ed è esattamente l'errore del sito da cui questo verticale nasce.
   L'oro si sdoppia in tre ruoli e ognuno ha il suo mestiere:
     --gold      superficie e filetti (mai testo su chiaro) · testo su fondo scuro (6,56 su --night)
     --gold-ink  testo su fondo chiaro: occhielli, link, numerali (6,16 su carta · 5,57 su crema)
     --gold-lt   testo su fondo scuro quando serve più stacco (8,08 su --night)
   ⚠ --brand-mid è una SUPERFICIE, non un fondo da testo tenue: --on-dark-muted vi cade a 4,19. */
:root {
  /* --- Colore (carta + crema + bordeaux + oro) --- */
  --paper:    #FFFFFF;  /* carta: fondo generale */
  --surface:  #F7F3EC;  /* crema: bande alterne */
  --tint:     #F0E8DA;  /* crema profonda: targhe e riquadri dentro le bande crema */
  --ink:      #383737;  /* inchiostro: testo corrente (11,9:1 su carta) */
  --ink-muted:#63605C;  /* inchiostro tenue: testo secondario SOLO su fondo chiaro (6,25:1 su carta) */
  --line:     #E5DFD4;  /* filetto: righe e bordi (non-testo) */

  --brand-dark:#3C1C20; /* bordeaux: titoli e bottone primario (15,2:1 su carta) */
  --brand-mid: #5A3A3E; /* bordeaux medio: superficie di stacco — MAI fondo per testo tenue */
  --night:     #2B2A2A; /* notte: testata scura, piè di pagina, velo dell'hero */

  --gold:     #C9AB81;  /* oro di marca: filetti, fondi, testo SU SCURO (6,56 su --night) */
  --gold-ink: #7A5C36;  /* oro testo su chiaro: occhielli, link, numerali (6,16 su carta) */
  --gold-dark:#6E5230;  /* oro testo su chiaro, grado forte (7,21 su carta) */
  --gold-lt:  #D8BF9C;  /* oro chiaro: testo su fondo scuro (8,08 su --night) */

  --on-dark:  #F3EFE8;  /* testo su fondo scuro (12,5:1 su --night) */
  --on-dark-muted:#B0A79A; /* testo secondario su fondo scuro (6,02:1 su --night) */

  --bg: var(--paper);
  --fg: var(--ink);
  --accent: var(--gold);
  --focus: var(--gold-ink);

  /* --- Tipografia: display serif (EB Garamond) + testo sans (Alegreya Sans), OFL self-hosted.
     Sono i due caratteri del sito che il cliente ha approvato; qui cambiano PESO e SPAZIATURA, non
     famiglia: il maiuscoletto a 0,15em di quel sito è elegante ma affoga i titoli lunghi. --- */
  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Alegreya Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --text-sm:  0.8rem;     /* occhielli/etichette, maiuscolo tracciato */
  --text-base: 1.0625rem; /* 17 corpo */
  --text-md:  clamp(1.1rem, 1rem + 0.5vw, 1.35rem);      /* lead */
  --text-lg:  1.35rem;    /* H3 */
  --text-xl:  clamp(1.8rem, 1.25rem + 2vw, 2.7rem);      /* H2 di sezione */
  --text-2xl: clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem);     /* testata di pagina */
  --text-3xl: clamp(2.6rem, 1.5rem + 4.4vw, 5rem);       /* display hero */

  --lh-tight: 1.06;   /* display */
  --lh-snug: 1.16;    /* titoli */
  --lh-body: 1.65;
  /* ⚠ Il tracciamento dei TITOLI scende da 0,15em (sito attuale) a 0,02em: il maiuscoletto molto
     spaziato resta solo sugli occhielli, dove le stringhe sono corte. */
  --tracking-label: 0.18em;
  --tracking-display: 0.02em;

  /* --- Spaziatura --- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4.5rem; --space-9:6.5rem; --space-10:9rem;
  --section-y: clamp(4rem, 2.4rem + 6vw, 8rem);

  /* --- Testata e targa dell'hero: forma PER-SITO ---
     ⚠⚠ I default qui sotto riproducono ESATTAMENTE la testata piena e squadrata e la targa a
     `min-content` di oggi: un sito che non li ridichiara dal preset non cambia di un pixel. Esistono
     perche' la forma della testata e la misura della targa sono decisioni di SITO, non di verticale —
     un cliente vuole la barra piena, un altro la capsula sospesa durante lo scorrimento. */
  --hdr-pad: var(--space-5);            /* altezza a riposo */
  --hdr-mark-w: clamp(148px, 17vw, 208px);          /* marchio a riposo */
  --hdr-mark-w-scrolled: clamp(124px, 13vw, 168px); /* marchio durante lo scorrimento */
  --hdr-pad-scrolled: var(--space-3);   /* altezza durante lo scorrimento */
  --hdr-w: 100%;                        /* larghezza a riposo */
  --hdr-w-scrolled: 100%;               /* larghezza durante lo scorrimento */
  --hdr-top-scrolled: 0px;              /* stacco dal bordo alto: >0 => capsula sospesa */
  --hdr-radius-scrolled: 0px;
  --hdr-bg-scrolled: var(--paper);
  --hdr-border-scrolled: var(--line);   /* ⚠ default = il filetto di oggi, non `transparent`: azzerarlo toglierebbe la riga sotto la testata ai siti gia' consegnati */
  --hdr-shadow-scrolled: 0 2px 18px rgba(60,28,32,.09);
  --hdr-blur-scrolled: none;            /* ⚠ il filtro si applica SOLO sopra i 900px: vedi components.css */

  /* --- Testata CINEMATOGRAFICA (per-sito) ---
     Con `sticky` + altezza a finestra + margine negativo pari, la fotografia RESTA ferma e il contenuto
     le scorre sopra: e' il gesto che i riferimenti 2026 hanno e una banda ferma no.
     ⚠ Serve `overflow: visible` sulla testata, sennò lo sticky non aggancia nulla: il contenimento del
     Ken Burns passa a `.hero__media`, che ha il suo. I DEFAULT sono la testata ferma di oggi. */
  /* ⚠ Sul telefono la testata misura 887px contro 667 di viewport (133%): i due pulsanti finiscono
     sotto la piega. Il testo e' copy VERBATIM del cliente e non si taglia, ma 104px di respiro sopra e
     sotto una targa che ha gia' il suo padding sono troppi a 390px. Default = i 104px di oggi. */
  --hero-pad-mobile: var(--space-9);
  --hero-cta-mt-mobile: var(--space-7);
  --hero-overflow: hidden;
  --hero-media-pos: absolute;
  --hero-media-h: auto;
  --hero-media-mb: 0px;

  /* Banda contatti: la colonna dei recapiti e' molto piu' corta del modulo (misurato: 224px contro 815,
     cioe' 591px di vuoto a destra). Con `stretch` diventa un PANNELLO che usa tutta l'altezza. I default
     sono le due colonne allineate in alto di oggi. */
  --contatti-align: start;
  --contatti-info-display: block;
  --contatti-info-bg: transparent;
  --contatti-info-pad: 0px;
  --contatti-info-radius: 0px;

  /* ⚠ La cornice a due colonne ha senso finche' la colonna destra ha qualcosa che la riempie: sulla
     pagina dei contatti il pannello porta una FOTOGRAFIA ed e' alto quanto il modulo, in home no (288px
     contro 815) e sotto il pannello restava un vuoto alto mezzo schermo. Questi token sciolgono la
     cornice: il blocco di testa si promuove a figlio della griglia (`contents`), il modulo passa sotto a
     TUTTA larghezza su due colonne e il pannello resta in alto a destra accanto al titolo. I default
     riproducono le due colonne di oggi, e la regola che li consuma si applica solo dove il pannello NON
     ha una fotografia: i due showroom fratelli non cambiano di un pixel. */
  --contatti-row-gap: clamp(2rem, 5vw, 4.5rem);
  --contatti-first-display: block;
  --contatti-intro-col: auto;
  --contatti-info-area: auto;
  --contatti-form-col: auto;
  --contatti-form-mt: var(--space-6);
  --contatti-form-display: block;
  --contatti-form-cols: none;
  --contatti-form-gap: 0px;
  --contatti-msg-area: auto;
  --contatti-msg-display: block;
  --contatti-msg-minh: 8rem;

  /* Introduzione di sezione: `block` centrato (oggi) oppure DUE COLONNE a tutta larghezza. Su una banda
     senza fotografia un'introduzione centrata a 62ch copre un quarto di uno schermo da 1920 e il resto
     e' vuoto — e' il difetto che l'owner segnala come ricorrente. I default sono il centrato di oggi. */
  --intro-display: block;
  --intro-align: center;
  --intro-p-max: 62ch;
  --intro-p-mi: auto;
  --sec-head-just: center;

  /* Sovrapposizioni editoriali: la fotografia di una sezione ESCE dal contenitore e arriva al bordo
     dello schermo, e la prima sezione di una pagina CAVALCA la testata. A 0 non succede nulla. */
  --sez-media-bleed: 0px;
  --pg-first-pull: 0px;

  /* Filetto che si DISEGNA sotto l'occhiello quando la sezione entra. A 0 non c'e': i siti che non lo
     dichiarano non hanno nulla di nuovo sotto i loro occhielli. */
  --eyebrow-rule-w: 0px;

  /* Targa dell'hero: `min-content` la stringe sulla parola piu' lunga del titolo. Un titolo lungo ci
     va a capo molte volte e la targa sembra una colonna stretta: si allarga per SITO. */
  --hero-plate-w: min-content;
  --hero-plate-max: min(100%, 62ch);

  /* --- Layout --- */
  --container: 1240px;
  --container-narrow: 68ch;
  --gutter: clamp(1.25rem, 0.4rem + 4vw, 3.5rem);

  /* --- Forma: squadrata, come il sito da cui nasce --- */
  --radius: 0px;
  --radius-lg: 0px;
  --border: 1px solid var(--line);

  --shadow-md: 0 16px 44px rgba(60,28,32,.10), 0 3px 12px rgba(60,28,32,.06);

  /* --- Velo delle bande fotografiche. NON porta il contrasto del testo — quello lo porta la targa
     (`.hero__body`, `.page-head__inner`), misurata sui pixel. Qui serve solo a staccare la fotografia
     dal cromo chiaro e a tenere insieme fotogrammi di esposizione diversa: annegare la foto per far
     leggere il testo sarebbe una resa. --- */
  --scrim: linear-gradient(100deg, rgba(43,42,42,.46) 0%, rgba(43,42,42,.34) 40%, rgba(43,42,42,.16) 72%, rgba(43,42,42,.10) 100%);
  --scrim-mobile: linear-gradient(178deg, rgba(43,42,42,.22) 0%, rgba(43,42,42,.34) 55%, rgba(43,42,42,.46) 100%);

  /* --- Motion (sobria) --- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur: 260ms;
}
@media (prefers-reduced-motion: reduce){ :root{ --dur:0ms; } }