/* tokens.css — design genome aperture_studio. Serramenti e chiusure su misura: la tesi è «la luce che
   entra», quindi la pagina è CHIARA e le bande scure sono rare e nette — sono l'alluminio, non il fondo.
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.

   L'antracite NON viene da un catalogo: è il RAL 7016, la finitura di gran lunga più diffusa sugli infissi
   in alluminio, ed è anche l'unico colore che il marchio del primo cliente porta (logo in scala di grigi).
   L'ambra è la scelta di design che dà il calore domestico che il grigio puro non ha: un serramento si
   compra per la casa, non per l'officina.

   ⚠⚠ VINCOLO GENERATIVO DEL VERTICALE — da qui discende quasi tutto il resto: in questo mestiere il
   cliente NON ha fotografie di grande formato (scatti di cantiere, render di capitolato, miniature
   recuperate dal suo vecchio sito). Il carattere quindi NON può stare nella fotografia: sta nei CAMPI DI
   COLORE PIENI e nella tipografia. Ogni sezione deve reggere anche a foto assente o media.

   Contratto palette (a11y, CALCOLATO — non stimato; da riverificare dal DOM prima della sanzione):
   ink su paper 14,44 · ink su surface 12,63 · ink su tint 13,06 ·
   ink-muted su paper 6,09 · su surface 5,33 · su tint 5,51 ·
   accent-ink su paper 5,74 · su surface 5,02 · su tint 5,19 · accent-dark su paper 7,80 · su surface 6,83 ·
   on-dark su brand 11,05 · su brand-dark 14,64 · su brand-mid 8,79 ·
   on-dark-muted su brand 5,92 · su brand-dark 7,85 · su brand-mid 4,71 ·
   accent-lt su brand 6,06 · su brand-dark 8,03 · su brand-mid 4,82 ·
   ink su accent 5,45 · ink su accent-lt 7,58.
   ⚠ REGOLE D'USO NON NEGOZIABILI (nascono dai numeri, non dal gusto):
   - --accent (ambra piena) NON è MAI testo su fondo CHIARO: 2,65 su paper, 2,32 su surface, 2,39 sul tint.
     Su chiaro è filetto, superficie, segno — e nulla di leggibile gli si posa sopra.
   - --accent-lt NON è MAI testo su fondo chiaro (1,90 su paper): esiste solo per i fondi scuri.
   - --accent-ink NON è MAI testo su fondo SCURO (2,01 sul brand): lì l'accento testuale è --accent-lt.
   - su un campo AMBRA il testo è --ink (5,45), MAI bianco (2,54). Vale per bottoni e tessere piene.
   - --ink-muted vale SOLO su fondo chiaro; su fondo scuro il secondario è --on-dark-muted.
   - --accent su --brand è 4,36: AA solo per il testo GRANDE. Per il testo piccolo su antracite si usa
     --accent-lt (6,06). Su --brand-dark l'ambra piena passa (5,78) e lì può fare anche testo piccolo.
   - ⚠ il FOCUS non può essere un colore solo: --accent-ink fa 5,74 su paper ma 2,01 sull'antracite. Il
     token vale per le superfici chiare (la maggioranza) e viene RIBALTATO in components.css su ogni
     superficie scura. Un anello di focus invisibile è un difetto di accessibilità, non un dettaglio.
   - un testo sopra una FOTO non è coperto da questi rapporti: va misurato dal pixel renderizzato — per
     questo la testata porta il titolo su un CAMPO PIENO accanto alla fotografia, mai sopra di essa. */
:root {
  /* --- Colore (antracite di prodotto + ambra + neutri caldi) --- */
  --paper:      #F5F3EF;  /* la LUCE: fondo dominante, caldo appena percettibile */
  --surface:    #E8E4DD;  /* sezioni alternate */
  --surface-2:  #DED9D0;  /* superfici di riposo e placeholder */
  --ink:        #1F2224;  /* inchiostro: testo (14,44:1 su paper) */
  --ink-muted:  #585C5F;  /* testo secondario SOLO su fondo chiaro (6,09:1) */
  --line:       #DAD5CB;  /* filetto: bordi e righe (non-testo) */
  --accent-ink: #8A5216;  /* ambra portata a TESTO su chiaro: occhielli, link (5,74:1) */
  --accent:     #C98A2E;  /* AMBRA: filetti, superfici, segni. MAI testo su chiaro. */
  --accent-dark:#6E4112;  /* ambra profonda: hover, testo su chiaro ad alto contrasto (7,80) */
  --accent-lt:  #E0A94E;  /* ambra chiara: testo su fondo scuro (6,06 sull'antracite) */
  --accent-tint:#F2E7D2;  /* ambra tint: fondo dei riquadri d'evidenza su chiaro */
  --brand:      #2E3336;  /* ANTRACITE RAL 7016: il colore del prodotto. Bande piene, campo della testata */
  --brand-dark: #1A1D1F;  /* antracite profondo: footer, hover del bottone */
  --brand-mid:  #3D4245;  /* antracite chiaro: superfici secondarie, filetti su scuro */
  --night:      #14171A;  /* quasi-nero: velo della fotografia */
  --on-dark:    #F1EEE9;  /* testo su fondi pieni scuri (11,05 sull'antracite · 14,64 sul profondo) */
  --on-dark-muted: #B4B0A9; /* testo secondario su fondo scuro (5,92 sull'antracite) */
  /* velo della fotografia: serve a LEGARE foto e campo di colore, non ad annegare lo scatto — il contrasto
     del titolo lo dà il campo pieno accanto, non il velo. */
  --scrim:      rgba(20,23,26,.30);
  --scrim-deep: rgba(20,23,26,.58);

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

  /* --- Tipografia: Sora per il display, IBM Plex Sans per il testo, entrambi OFL self-hosted.
     Sora è geometrica con contro-forme APERTE: è la lettera che dice «luce», e regge i titoli lunghi
     dell'italiano commerciale («Realizzazione di Porte e Infissi a Palermo») senza impastare.
     IBM Plex Sans nasce per la documentazione tecnica: è ciò che rende leggibile una tabella di
     specifiche fitta di millimetri, chilogrammi e sigle — il contenuto più ricco di questo mestiere.
     ⚠ Il display vive a PESO 500/700; il testo a 400/500/600.
     ⚠ tokens.css DEVE definire --font-display e --font-body (tokensOf lancia se un token manca). --- */
  --font-display: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Scala tipografica. ⚠ I gradi alti sono CAPPATI con clamp() (regola 6): la copy reale del cliente è
     molto più lunga di quella del demo, e un display senza tetto produce titoli da 5 righe. */
  --text-sm:   0.8125rem; /* occhielli e meta, maiuscoletto tracciato */
  --text-base: 1.0625rem; /* 17 corpo */
  --text-md:   clamp(1.06rem, 1rem + 0.34vw, 1.2rem);      /* lead */
  --text-lg:   clamp(1.24rem, 1.08rem + 0.66vw, 1.56rem);  /* H3 */
  --text-xl:   clamp(1.6rem, 1.28rem + 1.36vw, 2.2rem);    /* H2 — titoli di sezione */
  --text-2xl:  clamp(1.9rem, 1.5rem + 1.86vw, 2.8rem);     /* display di sezione */
  --text-3xl:  clamp(2.2rem, 1.72rem + 2.3vw, 3.4rem);     /* display della testata */
  /* corpo delle tabelle di specifica: leggermente sotto il testo, con cifre a larghezza fissa */
  --text-spec: 0.9375rem;

  --lh-tight: 1.06;
  --lh-snug: 1.12;
  --lh-body: 1.68;
  --tracking-label: 0.16em;     /* gli occhielli sono tracciati, mai gridati */
  --tracking-display: -0.012em; /* la geometrica alle scale grandi vuole un filo di stretta */

  /* --- 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:7rem; --space-10:10rem;
  --section-y: clamp(3.5rem, 2.2rem + 4vw, 6.5rem);

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 68ch;
  --gutter: clamp(1.1rem, 0.5rem + 2.4vw, 2.2rem);

  /* --- Forma: SQUADRATA. Nella categoria i riferimenti architettonici (BeArchitect6, BeEco3, BeBuilder2)
     hanno tutti raggio 0; e un serramento è fatto di angoli retti. --- */
  --radius: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;
  --border: 1px solid var(--line);

  /* Distanza fra il bordo della pagina e il contenitore: è ciò che un blocco deve recuperare per arrivare
     a filo pagina. ⚠ CRESCE SENZA LIMITE con la finestra (a 2560px vale 660): chi la usa come padding di
     compenso DEVE aggiungerla anche alla propria larghezza massima, altrimenti su un monitor largo il
     padding si mangia il blocco e il testo si riduce a una colonna di una lettera. */
  --bleed: max(var(--gutter), (100vw - var(--container)) / 2);

  /* --- Ombra: quasi assente. La luce qui è un fatto di colore e di spazio, non di ombra portata. --- */
  --shadow-sm: 0 4px 14px rgba(20,23,26,.06);
  --shadow-md: 0 24px 50px -34px rgba(20,23,26,.38);

  --tile-gap: clamp(0.75rem, 0.4rem + 1.1vw, 1.25rem);

  /* --- L'APERTURA: il segno del verticale. Il telaio è un bordo antracite spesso attorno alla fotografia,
     che così legge come una finestra e non come un riquadro qualunque. Il valore è la sezione del telaio:
     cresce col viewport come cresce un serramento vero. --- */
  --frame-w: clamp(8px, 0.4rem + 0.5vw, 14px);

  /* Altezza del «cromo» in testa alla pagina. I valori sono le altezze reali dell'header ai suoi punti
     di rottura: servono a chi deve scavalcarlo (testata a tutta altezza, ancore). */
  --chrome: 92px;

  /* --- Motion --- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur: 240ms;
}
@media (max-width: 899.98px) { :root { --chrome: 68px; } }
@media (prefers-reduced-motion: reduce){ :root{ --dur:0ms; } }