/* tokens.css — design genome thermo_hydraulic_store. Rivendita termoidraulica al dettaglio e all'ingrosso:
   vetrina LUMINOSA su fondo bianco, con il prodotto protagonista e molta aria. Il riferimento di categoria
   è un negozio di prodotto (dyson): campo chiaro, oggetto grande, tipografia stretta sulle specifiche e
   larga sui titoli. Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente
   valori fuori da qui.

   La palette NON viene da un catalogo: blu e arancione sono MISURATI sui pixel del marchio del primo
   cliente (un sole arancione fuso con un fiocco di neve blu — il caldo e il freddo, che è il mestiere).

   Contratto palette (a11y, MISURATO — non stimato; soglia operativa 4,6 perché al limite esatto di 4,5
   axe boccia per arrotondamento):
   ink su paper 16,54 · ink su surface 15,35 · ink su surface-2 14,19 · ink su accent-tint 14,82 ·
   ink-muted su paper 7,32 · ink-muted su surface 6,79 · brand su paper 7,04 · brand su surface 6,53 ·
   on-dark su brand 7,04 · on-dark su brand-dark 10,39 · on-dark su brand-mid 5,39 ·
   on-dark-muted su brand 5,26 · on-dark-muted su brand-dark 7,77 ·
   accent-ink su paper 5,93 · accent-ink su surface 5,50 · accent-ink su accent-tint 5,31 ·
   accent-lt su brand 5,04 · accent-lt su brand-dark 7,43 · ink su accent 6,75.

   ⚠⚠ REGOLE D'USO NON NEGOZIABILI (nascono dai NUMERI, non dal gusto):
   - --accent (arancione pieno) NON è MAI testo, su NESSUN fondo: 2,45 su bianco, 2,87 sul blu, 4,24 sul blu
     profondo. Su qualunque superficie è campitura, filetto, segno — e l'unica cosa leggibile che gli si
     posa sopra è --ink (6,75). ⇒ dove l'arancione fa da bottone, il testo sopra è INCHIOSTRO, mai bianco
     (bianco su arancione = 2,45).
   - l'accento che porta TESTO su fondo chiaro è --accent-ink (5,93); su fondo blu è --accent-lt (5,04).
   - --ink-muted vale SOLO su fondo chiaro; su fondo blu si usa --on-dark-muted.
   - ⚠ --line è un FILETTO DECORATIVO (1,3 su bianco): non basta per un bordo che deve VEDERSI. Il bordo di
     un campo di modulo usa --line-strong (3,51 su bianco, 3,26 su surface), che soddisfa WCAG 1.4.11.
   - ⚠ il FOCUS non può essere un colore solo: --brand fa 7,04 su bianco ma 1,00 su sé stesso. Il token vale
     per le superfici chiare (la maggioranza) e viene RIBALTATO in components.css su ogni superficie blu.
     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 PANNELLO pieno accanto alla fotografia, non sopra di essa.
     In questo settore la fotografia è di PRODOTTO SU FONDO CHIARO (rubinetterie in studio, prodotti
     scontornati su bianco): un titolo bianco sopra uno scatto così scende sotto AA per costruzione.

   ⭐ IL SEGNO DEL VERTICALE — LA TEMPERATURA DEI REPARTI.
   Un negozio di termoidraulica vende due mestieri opposti: si toglie calore (climatizzazione, trattamento
   acqua, elettropompe) e si dà calore (riscaldamento, caldaie, termoarredi). Ogni reparto porta quindi un
   segno FREDDO, CALDO o NEUTRO, e i sistemi ibridi — che fanno entrambe le cose — li portano tutti e due.
   Serve a due cose insieme: dà carattere, e risolve il problema vero di questo mestiere, cioè decine di
   tessere di prodotto altrimenti identiche su fondo bianco, dove è il COLORE che separa e non la foto.
   ⚠ La temperatura è STRUTTURA (vive qui e nel CSS), non copy: se la scrivesse il cliente potrebbe
   smentire il prodotto che la tessera mostra.
   ⚠⚠ Il segno CALDO non è l'arancione di marca: --accent sul proprio tint fa 2,20, cioè non si vedrebbe.
   Il segno caldo è --accent-ink (5,31 sul tint caldo). Il freddo è --brand (6,04), il neutro --ink-muted
   (6,45). Tutti e tre sopra 3,0, come esige un elemento grafico portatore di informazione. */
:root {
  /* --- Colore (blu di marca + arancione + neutri freddi luminosi) --- */
  --paper:      #FFFFFF;  /* fondo dominante: la vetrina è chiara */
  --surface:    #F2F7FC;  /* ghiaccio: sezioni alternate */
  --surface-2:  #E4EFF9;  /* superfici di riposo, placeholder, tint FREDDO */
  --ink:        #10202F;  /* inchiostro: testo (16,54:1 su paper) */
  --ink-muted:  #46586B;  /* testo secondario SOLO su fondo chiaro (7,32:1) */
  --line:       #D6E4F0;  /* filetto DECORATIVO: righe e separatori (non-testo, non-bordo-di-campo) */
  --line-strong:#6E8CA8;  /* bordo che DEVE vedersi: campi di modulo (3,51 su paper — WCAG 1.4.11) */
  --brand:      #1058A8;  /* BLU di marca: testo, bottone primario, campiture piene */
  --brand-dark: #0B3F7D;  /* blu profondo: piè di pagina, hover del bottone */
  --brand-mid:  #2A6BB8;  /* blu chiaro: superfici secondarie (porta il bianco: 5,39) */
  --accent:     #F88838;  /* ARANCIONE: campiture, filetti, segni — MAI testo */
  --accent-ink: #A34A08;  /* arancione portato a TESTO su chiaro: occhielli, link, segno caldo (5,93) */
  --accent-dark:#E06A18;  /* arancione profondo: hover di superficie */
  --accent-lt:  #FFD2A6;  /* arancione chiaro: testo su fondo blu (5,04 sul blu, 7,43 sul blu profondo) */
  --accent-tint:#FFF0E2;  /* tint CALDO: fondo delle tessere calde e dei riquadri d'evidenza */
  --neutral-tint:#EDF1F5; /* tint NEUTRO: tessere che non hanno temperatura (arredo, idraulica) */
  --night:      #071726;  /* blu-nero: velo della fotografia */
  --on-dark:    #FFFFFF;  /* testo su campiture blu (7,04 sul blu · 10,39 sul blu profondo) */
  --on-dark-muted: #CFE1F2; /* testo secondario su fondo blu (5,26 sul blu · 7,77 sul profondo) */

  /* Temperature dei reparti: superficie, segno e testo del segno. Il SEGNO è ciò che si vede da lontano
     (un filetto in cima alla tessera); il testo dell'occhiello usa lo stesso colore. */
  --t-cold:      var(--brand);
  --t-cold-bg:   var(--surface-2);
  --t-cold-bg2:  #EEF5FB;   /* estremo chiaro del gradiente della tessera fredda */
  --t-warm:      var(--accent-ink);
  --t-warm-bg:   var(--accent-tint);
  --t-warm-bg2:  #FFF6ED;   /* estremo chiaro del gradiente della tessera calda */
  --t-neutral:   var(--ink-muted);
  --t-neutral-bg: var(--neutral-tint);

  /* velo della fotografia: serve a LEGARE foto e campo di colore, non ad annegare lo scatto — il contrasto
     del titolo lo dà il pannello pieno accanto, non il velo. Per questo è basso. */
  --scrim:      rgba(7,23,38,.18);
  --scrim-deep: rgba(7,23,38,.42);

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

  /* --- Tipografia: Archivo per il display, Inter per il testo, entrambi OFL self-hosted.
     Archivo è una grottesca industriale a terminali piatti: è il parente più diretto del marchio (un sans
     geometrico bold) e regge i pesi alti che un titolo di vetrina pretende. Il testo sta a Inter 400/500,
     che a 17px tiene le specifiche tecniche leggibili.
     ⚠ Il display vive a PESO 800: sotto, un titolo di vetrina non ha presenza. Prima di cambiare famiglia,
     guardare il PESO — due volte, in questo progetto, il font era già quello giusto e sbagliava solo il peso.
     tokens.css deve definire --font-display e --font-body (tokensOf lancia se un token manca). --- */
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Scala tipografica: base 17px, ratio 1.26. Il 3xl è CAPPATO con clamp (regola 6: niente display
     sovradimensionato). ⚠ Dentro clamp() il `+` ESIGE gli spazi: senza, la dichiarazione è invalida e
     viene scartata INTERA, senza lasciare traccia nel sorgente — solo il DOM lo direbbe. */
  --text-sm:   0.875rem;
  --text-base: 1.0625rem;
  --text-md:   1.25rem;
  --text-lg:   1.5rem;
  --text-xl:   clamp(1.75rem, 1.35rem + 1.6vw, 2.35rem);
  --text-2xl:  clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem);
  --text-3xl:  clamp(2.15rem, 1.4rem + 3.2vw, 3.65rem);

  /* Interlinee e tracciatura come TOKEN: le topologie condivise fra verticali possono usare solo token
     presenti in TUTTI, e un valore letterale qui dentro le escluderebbe da questo verticale. */
  --lh-tight: 1.02;   /* display grandi: un titolo di vetrina sta strettissimo */
  --lh-snug:  1.12;   /* titoli di sezione e di tessera */
  --lh-body:  1.65;   /* prosa: 17px a 1.65 tiene leggibili anche le specifiche tecniche */
  --tracking-label: 0.14em;  /* occhielli maiuscoli: tracciati, mai gridati */

  /* Spaziatura: densità ARIOSA. La vetrina respira — è metà del linguaggio di categoria. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5.5rem;
  --space-10: 7rem;

  /* Raggio: 10/20. Non zero (che è il registro istituzionale) e non pillola (che è il registro
     promozionale): un raggio medio è il taglio del prodotto di consumo contemporaneo. */
  --radius: 10px;
  --radius-lg: 20px;

  --container: 1280px;
  --container-narrow: 760px;   /* colonna di lettura per le pagine di solo testo */
  --gutter: var(--space-5);
  --section-y: clamp(3.5rem, 2rem + 5vw, 6.5rem);

  /* Scavalcamento: di quanto una fotografia esce dalla propria banda. È un valore DICHIARATO, non emergente
     da quale colonna è più alta — quella dipendenza è il difetto che in un caso reale produsse −24px, cioè
     un buco con un'ombra invece di uno scavalcamento. */
  --overlap: clamp(1.75rem, 3.4vw, 3.75rem);

  --shadow-sm: 0 1px 2px rgba(16,32,47,.06), 0 2px 8px rgba(16,32,47,.05);
  --shadow-md: 0 2px 6px rgba(16,32,47,.07), 0 12px 28px rgba(16,32,47,.08);
  --shadow-lift: 0 6px 14px rgba(16,32,47,.09), 0 20px 44px rgba(16,32,47,.10);
}