/* Token del verticale joinery_workshop — falegnameria che restaura e vernicia serramenti in legno.
   La famiglia cromatica è MISURATA sui pixel del marchio del primo cliente: navy #1A3D63 (68k px),
   rosso #C63B37 (34k px), verde foglia #9FC16C (5,7k px). I ruoli seguono quella gerarchia: il navy è
   struttura, il verde è la firma dell'ecosostenibilità, il rosso è l'unico punto d'enfasi.

   ⚠⚠ TRE DIVIETI, e valgono NEI DUE VERSI (una guardia scritta in un verso solo lascia passare
   l'altro):
     - --accent (verde) come TESTO su fondo chiaro fa 1,90 → è SOLO superficie; su chiaro si usa
       --accent-ink (5,64), su navy --accent-lt (6,76);
     - --red come TESTO su --surface fa 4,33 → come testo si usa SEMPRE --red-ink (5,37);
     - rosso su navy fa 2,16 e verde su --brand-mid fa 4,16 → nessuno dei due ci va mai.
   Ogni valore qui sotto porta il contrasto misurato contro i fondi su cui compare davvero. */

:root {
  /* --- superfici --- */
  --paper:      #F5F7F9;  /* la LUCE: fondo dominante, freddo appena percettibile (il navy lo chiede) */
  --surface:    #E7ECF1;  /* sezioni alternate */
  --tint:       #EAF2DF;  /* verde tint: fondo dei riquadri d'evidenza e delle bande eco */

  /* --- inchiostri su chiaro --- */
  --ink:        #1B2229;  /* testo (14,96 su paper · 13,51 su surface · 13,97 su tint) */
  --ink-muted:  #565F69;  /* testo secondario su fondo chiaro (6,04 · 5,46 · 5,64) */
  --line:       #D3DBE3;  /* filetto: bordi, divisori e righe (non-testo) */

  /* --- navy: la struttura --- */
  --brand:      #1A3D63;  /* bande piene, campo della testata, display su chiaro (10,34) */
  --brand-dark: #122C48;  /* piè, hover del bottone (bianco 14,19) */
  --brand-mid:  #274F79;  /* superfici secondarie su scuro (bianco 8,47) */
  --night:      #0E2138;  /* velo della fotografia */

  /* --- verde foglia: la firma eco --- */
  --accent:     #9FC16C;  /* SUPERFICIE su chiaro, filetti, marcatori. MAI testo su chiaro. */
  --accent-ink: #4F6B2A;  /* verde portato a TESTO su chiaro: occhielli, link (5,64 · 5,09 · 5,27) */
  --accent-dark:#3E5520;  /* verde profondo: hover ad alto contrasto */
  --accent-lt:  #B7D488;  /* verde a TESTO su navy (6,76 sul brand · 8,64 sul profondo) */

  /* --- rosso: l'unico punto d'enfasi --- */
  --red:        #C63B37;  /* SUPERFICIE del bottone primario (bianco su rosso 5,14) */
  --red-ink:    #B02F2C;  /* rosso portato a TESTO su chiaro (5,95 · 5,37 · 5,55) */

  /* --- testo su fondi pieni scuri --- */
  --on-dark:       #F1F4F7;  /* 11,10 sul brand · 14,19 sul profondo */
  --on-dark-muted: #A9B6C4;  /* testo secondario su navy (5,72 sul brand) */

  --scrim:      rgba(14,33,56,.26);
  --scrim-deep: rgba(14,33,56,.52);
  /* Targa della colonna di testo nell'hero: garantisce il contrasto su QUALUNQUE fotogramma dello
     slideshow, e per questo il velo sopra la fotografia può restare leggero. Il numero si calcola sul
     pixel PEGGIORE: .84·26 + .16·255 = 62,6 → il bianco ci sta sopra a 11,8. */
  --plate:      rgba(26,61,99,.84);

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

  /* --- tipografia: Prompt + Hind, i caratteri del sito del cliente. Qui cambiano scala e peso. --- */
  --font-display: "Prompt", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Hind", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --text-sm:   0.8125rem; /* occhielli e meta, maiuscoletto tracciato */
  --text-base: 1.0625rem; /* 17 corpo — il sito attuale sta a 15 ed è poco */
  --text-md:   clamp(1.06rem, 1rem + 0.34vw, 1.2rem);      /* lead */
  --text-lg:   clamp(1.2rem, 1.06rem + 0.6vw, 1.5rem);     /* H3 */
  --text-xl:   clamp(1.55rem, 1.24rem + 1.3vw, 2.1rem);    /* H2 — titoli di sezione */
  --text-2xl:  clamp(1.9rem, 1.4rem + 2.1vw, 2.9rem);      /* testate di pagina */
  --text-3xl:  clamp(2.3rem, 1.5rem + 3.4vw, 4rem);        /* display dell'hero */
  --text-num:  clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);      /* gli indici 01–05 del registro */

  --lh-tight: 1.06;
  --lh-snug: 1.14;
  --lh-body: 1.68;
  --tracking-label: 0.18em;      /* gli occhielli sono tracciati, mai gridati */
  --tracking-display: -0.014em;  /* Prompt alle scale grandi vuole un filo di stretta */

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

  --container: 1200px;
  --container-narrow: 68ch;
  --gutter: clamp(1.1rem, 0.5rem + 2.4vw, 2.2rem);
  /* ⚠ Il full-bleed risolve il 50% sulla CELLA di griglia, non sul container: la formula giusta parte
     dal gutter, e ogni grandezza che dipende da 100vw va provata anche a 2560. */
  --bleed: max(var(--gutter), (100vw - var(--container)) / 2);

  /* --- forma: angoli vivi ovunque, è il registro di BeArchitect6 --- */
  --radius: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;
  --border: 1px solid var(--line);

  --shadow-sm: 0 4px 14px rgba(14,33,56,.07);
  --shadow-md: 0 24px 50px -34px rgba(14,33,56,.40);

  /* ⚠ Il respiro fra le tessere: a 20px le fotografie si leggono come un blocco unico e «stanno
     troppo attaccate». A 28 ciascuna torna a essere una fotografia. */
  --tile-gap: clamp(1rem, 0.55rem + 1.7vw, 1.75rem);
  /* Sfalsamento della cornice a filetto: è il segno del verticale, e si ancora al contenitore della
     FOTOGRAFIA — mai alla tessera, che è più alta perché contiene anche il testo. */
  --frame-off: clamp(10px, 0.5rem + 0.6vw, 18px);

  --chrome: 88px;        /* altezza FISSA della testata: dedurla dalle metriche del font la fa ballare */
  --topbar: 38px;        /* riga istituzionale sopra la testata */

  --ease: cubic-bezier(.2,.6,.2,1);
  --dur: 240ms;
}