/* tokens.css — design genome agri_supplier. Distributore di mezzi tecnici per l'agricoltura
   professionale: agrofarmaci, fertilizzanti, biostimolanti, irrigazione, più consulenza agronomica in
   campo. Registro ISTITUZIONALE DI CAMPAGNA — l'autorevolezza B2B della categoria «Aziende», ma verde e
   assolata invece che navy e corporate. Riferimento distillato: BeLogistics2 (testata scura full-bleed,
   una parola del titolo nell'accento). ⚠ `security_institute` è l'altro verticale della stessa categoria
   e prende BeCorporation: la distanza fra i due è voluta, e passa dal colore e dalla testata.
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.

   La palette NON viene da un catalogo: il verde è MISURATO sulla livrea del cliente pilota (il furgone
   porta il marchio su una campitura piena, campionata a #265448 sul 18,7% dei pixel dell'insegna).

   Contratto palette (a11y, MISURATO su 23 coppie — non stimato, margine minimo 4,15):
   ink su paper 17,44 · ink su surface 15,87 · ink su sage-tint 14,92 · ink-muted su paper 7,30 ·
   on-dark su brand 8,59 · su brand-dark 12,46 · su brand-mid 6,94 · on-dark-muted su brand 5,70 ·
   accent su brand 5,14 · su brand-dark 7,45 · su brand-mid 4,15 · ink su accent 10,44 ·
   accent-ink su paper 5,74 · su surface 5,23 · su sage-tint 4,91 · on-dark su accent-ink 5,74.

   ⚠⚠ REGOLE D'USO NON NEGOZIABILI (nascono dai numeri, non dal gusto):
   - L'ACCENTO È ORO-GRANO e vive SOLO su fondo scuro o come campitura di bottone con --ink sopra.
     Su carta fa 1,67 e su superficie 1,52: non porta testo di nessun colore chiaro, e il bianco sopra
     l'accento fa 1,67. Chi scrive bianco sull'oro, o oro su fondo chiaro, rompe il contratto.
     ⭐ L'oro-grano non è una scelta di gusto: è l'UNICA famiglia cromatica con margine reale sul verde
     (l'arancione agrume si ferma a 2,85 e non passa nemmeno come testo grande), ed è il colore della
     spiga che il marchio del cliente porta dentro il monogramma.
   - Per l'accento TESTUALE su fondo chiaro esiste --accent-ink (ruggine, 5,74 su carta): è il colore
     dei link, e su fondo scuro NON va usato (1,50 su --brand).
   - --ink-muted vale SOLO su fondo chiaro; su fondo scuro si usa --on-dark-muted.
   - Un testo sopra una FOTO o sopra un VIDEO non è coperto da questi rapporti: va misurato dal pixel
     renderizzato. Per questo la testata porta il velo in terna (--veil-rgb) a tre fermate, e il titolo
     non appoggia mai sul fotogramma nudo. */
:root {
  /* --- Colore (carta calda + verde della livrea + oro della spiga) --- */
  --paper:      #FFFFFF;  /* carta: fondo dominante */
  --surface:    #F6F4EF;  /* osso: sezioni alternate, appena calda — è campagna, non ospedale */
  --surface-2:  #EDE9E0;  /* superfici di riposo, placeholder, righe */
  --ink:        #1A1A17;  /* quasi-nero caldo: testo (17,44:1 su paper) */
  --ink-muted:  #4A5A52;  /* grigio-verde: testo secondario SOLO su fondo chiaro (7,30:1) */
  --line:       #DCD8CF;  /* filetto: bordi e righe (non-testo) */
  --brand:      #265448;  /* VERDE DELLA LIVREA, misurato: la banda che parla (bianco 8,59) */
  --brand-mid:  #2E6353;  /* verde medio: hover, superfici intermedie (bianco 6,94) */
  --brand-dark: #173A31;  /* verde profondo: piè, velo della testata (bianco 12,46) */
  --brand-deep: #0E2620;  /* verde quasi-nero: fondo del velo video (bianco 15,95) */
  /* ⚠⚠ Il velo del video ha bisogno del colore in TERNA, perché gli serve trasparente a tre fermate.
     Scritto come letterale rgba() sfuggirebbe a una ricerca per esadecimale e a qualunque rimappatura:
     un colore di marca dentro un componente si dichiara QUI, sempre. */
  --veil-rgb: 14 38 32;   /* = --brand-deep */
  --sage:       #4A5A52;  /* salvia: testo di servizio su chiaro, filetti scuri (bianco 7,30) */
  --sage-light: #8FA79B;  /* salvia chiara: SOLO superficie e bordi, MAI testo (2,57 su carta) */
  --sage-tint:  #E8EFEA;  /* salvia carta: riquadri e bande tenui (ink sopra 14,92) */
  --on-dark:    #FFFFFF;  /* testo su fondi pieni */
  --on-dark-muted: #C7D6CD; /* testo secondario su fondo scuro (5,70 sulla banda · 8,26 sul piè) */
  /* ⚠ L'oro-grano porta SOLO --ink (10,44), MAI il bianco (1,67). È campitura di bottone, filetto,
     parola d'accento sul verde — mai testo su carta. */
  --accent:     #E9C46A;  /* oro-grano: la spiga del marchio (su brand 5,14 · su brand-dark 7,45) */
  --accent-dark:#C9922B;  /* oro profondo: hover del bottone e bordi (ink sopra 6,34) */
  --accent-ink: #A84A16;  /* ruggine: l'accento TESTUALE su fondo chiaro, colore dei link (5,74) */

  /* Velo della testata video/foto: tre fermate sul verde quasi-nero, così il titolo regge sia su un
     fotogramma chiaro (campo di grano a mezzogiorno) sia su uno scuro. ⚠ Il video del cliente pilota
     alterna esterni assolati e interni: il velo si tara sul fotogramma PEGGIORE, non sul primo. */
  --scrim:      rgba(14,38,32,.34);
  --scrim-deep: rgba(14,38,32,.72);
  /* Filetto su fondo pieno: bianco trasparente, l'unico colore non-token ammesso nei componenti. */
  --hairline-on-dark: rgba(255,255,255,.18);
  --footer-deep: #0B1F19;  /* fondo della sfumatura del piè */

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

  /* --- Tipografia: display grottesco robusto (Archivo) + testo umanista ad alta leggibilità
     (Source Sans 3), entrambi OFL self-hosted. Archivo regge il maiuscolo dell'insegna e ha la
     larghezza istituzionale della categoria; Source Sans 3 nasce per interfacce e tiene i testi
     lunghi e fitti — che qui sono la norma: gli elenchi di colture, di marchi e di comparti del
     materiale superano i 500 caratteri per capoverso. Il riferimento di categoria usa Poppins e
     Krub: la tipografia è uno dei quarti in cui il template si MIGLIORA. --- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* scala tipografica. ⚠ Tarata sulla copy DEMO ma verificata sulla copy REALE: il titolo più lungo
     del cliente pilota è «Prodotti e soluzioni per l'agricoltura professionale» (52 caratteri), che a
     --text-2xl sta in due righe sul contenitore da 1200px. Le size dei template sono tarate su copy
     demo corta: misurare prima di adottare una scala. */
  --text-sm:   0.78rem;   /* occhielli e meta, maiuscoletto tracciato */
  --text-base: 1.0625rem; /* 17 corpo */
  --text-md:   clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem);   /* lead */
  --text-lg:   clamp(1.18rem, 1.02rem + 0.66vw, 1.46rem); /* H3 */
  --text-xl:   clamp(1.5rem, 1.2rem + 1.35vw, 2.1rem);    /* H2 — titoli di sezione */
  --text-2xl:  clamp(1.7rem, 1.28rem + 1.75vw, 2.6rem);   /* display di sezione e page-head */
  /* ⚠ La page-head NON riusa la size della testata (regola 6): è una testata di pagina, non un hero. */
  --text-3xl:  clamp(2.1rem, 1.45rem + 2.6vw, 3.8rem);    /* display della testata */

  --lh-tight: 1.08;
  --lh-snug: 1.15;
  --lh-body: 1.68;
  --tracking-label: 0.16em;      /* gli occhielli sono tracciati, mai gridati */
  --tracking-display: -0.018em;  /* Archivo si stringe alle scale grandi */

  /* --- 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.25rem, 2.1rem + 3.8vw, 6rem);

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 66ch;
  --gutter: clamp(1.1rem, 0.5rem + 2.4vw, 2.2rem);
  /* Quota di larghezza della fotografia nella banda split. Dichiarata UNA volta: la consumano sia la
     colonna della griglia sia l'ancoraggio della figura, che devono coincidere per forza. */
  --split-media-share: 0.48;

  /* --- Forma: SPIGOLO VIVO. La categoria non arrotonda (BeCorporation, BeCorporation2 e BeFirm hanno
     radius 0; la pillola è dei template più commerciali). Un raggio minimo resta solo sulle foto, che
     senza sembrano ritagliate col taglierino. --- */
  --radius: 0px;
  --radius-lg: 2px;
  --radius-media: 3px;
  --radius-pill: 999px;

  /* --- Ombre: quasi assenti. In un registro istituzionale l'ombra sporca; la profondità la danno le
     campiture piene che si incastrano, non il rilievo. --- */
  --shadow-sm: 0 1px 2px rgba(26,26,23,.06);
  --shadow-md: 0 10px 30px rgba(26,26,23,.10);
  /* Ombra della barra fissa su mobile: proiettata verso l'ALTO, quindi non riusa le due precedenti. */
  --shadow-bar: 0 -2px 14px rgba(26,26,23,.16);

  /* --- Movimento: sobrio; ogni transizione si spegne con prefers-reduced-motion (base.css) --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 260ms;
  /* Durata del rullo dei marchi. ⚠ Va con il NUMERO di loghi: con 12 marchi a 42s la striscia scorre
     leggibile, con 26 la stessa durata la fa correre. Si ridichiara per-progetto se il numero cambia. */
  --marquee-dur: 42s;
}