/* tokens.css — design genome pharmacy. Farmacia di paese con reparti merceologici e servizi sanitari:
   registro MEDICALE CONTEMPORANEO, luminoso, su carta bianca, con episodi di banda piena nel verde di
   marca. È il registro che la nota di categoria «Farmacie/erboristerie» separa esplicitamente
   dall'apothecary caldo e botanico di herbal_boutique: là serif e crema, qui sans geometrico e verde
   pulito. La distanza fra i due verticali della stessa categoria è voluta.
   Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. Niente valori fuori da qui.

   La palette NON viene da un catalogo: è MISURATA sui loghi che il cliente ha consegnato. Il logo della
   farmacia è una tinta unica (#63B32F) e quello della parafarmacia un'altra (#324D9C); entrambi i file
   portano UN SOLO colore sui pixel opachi, e gli stessi valori escono dai PNG pubblicati sui suoi siti.

   Contratto palette (a11y, MISURATO su 31 coppie — non stimato, margine minimo 4,66):
   FARMACIA (verde) — ink su paper 15,77 · ink su surface 14,59 · ink-muted su paper 6,15 ·
   brand su paper 6,17 · on-dark su brand 6,17 · on-dark su brand-dark 8,64 · on-dark-muted su brand 5,08 ·
   accent-lt su brand 5,54 · ink su brand-mark 6,02.
   PARAFARMACIA (turchese) — ink su para-tint 14,26 · ink su para-surface 12,86 ·
   ink-muted su para-tint 5,56 · para su paper 5,72 · para su para-tint 5,17 · para su para-surface 4,66 ·
   on-dark su para 5,72 · on-dark su para-deep 8,31 · para-lt su para 4,96 · ink su para-mark 6,89.

   ⚠⚠ REGOLE D'USO NON NEGOZIABILI (nascono dai numeri, non dal gusto):
   - I DUE MARCHI si comportano allo stesso modo e vanno ricordati insieme: --brand-mark (#63B32F, il
     verde ESATTO del logo farmacia) e --para-mark (#7FB5B5, il RAL 6034 del logo parafarmacia ridipinto)
     portano SOLO --ink (6,02 e 6,89) e MAI il bianco (2,62 e 2,29). Sono croce, filetto, icona,
     campitura: la banda CHE PARLA IN BIANCO è --brand o --para, mai un marchio.
     ⚠ Non è la trappola di dental_practice, dove il marchio falliva in ENTRAMBI i versi: qui un verso
     è ammesso, ed è l'inchiostro. Chi scrive bianco su un marchio rompe il contratto.
   - Il turchese della parafarmacia è un PASTELLO e non regge testo: la pagina si regge sulla SCALA
     derivata dalla sua tinta (--para, --para-deep), non sul pastello nudo.
   - --ink-muted vale SOLO su fondo chiaro; su fondo scuro si usa --on-dark-muted;
   - un testo sopra una FOTO non è coperto da questi rapporti: va misurato dal pixel renderizzato. Per
     questo la testata porta il titolo su una campitura piena accanto alla foto, non sopra la foto. */
:root {
  /* --- Colore (carta clinica + verde di marca + blu della parafarmacia) --- */
  --paper:      #FFFFFF;  /* carta: fondo dominante, il registro della categoria è luminoso */
  --surface:    #F4F7F1;  /* verde carta: sezioni alternate — TINT DI MARCA */
  --surface-2:  #E6EEDF;  /* superfici di riposo, placeholder, righe di tabella */
  --ink:        #1F2420;  /* verde-nero: testo (15,77:1 su paper) */
  --ink-muted:  #5B6459;  /* grigio-verde: testo secondario SOLO su fondo chiaro (6,15:1) */
  --line:       #DFE6D9;  /* filetto: bordi e righe (non-testo) */
  --brand-mark: #63B32F;  /* VERDE DEL LOGO: croce, icone, campiture. Porta solo --ink (6,02), mai bianco */
  --brand:      #3D6D1D;  /* la banda che PARLA: fascia nav, bottone primario (bianco 6,17) */
  --brand-mid:  #447920;  /* verde medio: hover del bottone, superfici intermedie (bianco 5,25) */
  --brand-dark: #2F5516;  /* verde profondo: fondo del piè, velo (bianco 8,64) */
  --on-dark:    #FFFFFF;  /* testo su fondi pieni (6,17 sulla banda · 8,64 sul piè) */
  --on-dark-muted: #DDEFCB; /* testo secondario su fondo scuro (5,08 sulla banda · 7,11 sul piè) */
  --accent-lt:  #EAF7DE;  /* verde chiarissimo: l'accento che porta TESTO su fondo scuro (5,54) */

  /* --- Parafarmacia: seconda identità, TURCHESE RAL 6034. Vive come classe di pagina, non come tema
     separato: una sola famiglia di componenti, due vestiti.
     ⚠ Scelta dell'owner su richiesta scritta del cliente («cambio di colore del logo della PARAFARMACIA
     in pastello turchese RAL 6034 ed anche il colore della pagina dovrà seguire questa tonalità»).
     Comporta la RIDIPINTURA del marchio: il logo consegnato era blu #324D9C, tinta unica.
     ⚠⚠ Il RAL 6034 è un PASTELLO: a 2,29 su bianco non porta testo di nessun colore chiaro. La pagina
     turchese si regge quindi su una SCALA derivata dalla sua stessa tinta (H=180, S=0,27), non sul
     pastello nudo — che resta marchio e campitura. --- */
  --para-mark:  #7FB5B5;  /* RAL 6034 ESATTO: logo ridipinto, campiture, filetti. Porta solo --ink (6,89) */
  --para:       #406E6E;  /* la banda che PARLA: fondi pieni e testo su chiaro (bianco 5,72 · su carta 5,72) */
  --para-deep:  #315454;  /* turchese profondo: piè e velo della pagina parafarmacia (bianco 8,31) */
  --para-tint:  #EDF5F5;  /* turchese carta: superfici alternate della pagina parafarmacia */
  --para-surface:#DCEBEB; /* turchese di riposo: riquadri e placeholder (--para sopra fa 4,66) */
  --para-lt:    #E2F2F2;  /* turchese chiaro: testo secondario su fondo turchese pieno (4,96) */

  /* Velo della fotografia della testata. ⚠ NON serve a far leggere il titolo — quello sta sulla
     campitura accanto — ma a tenere unita la banda quando foto e blocco si affiancano. */
  --scrim:      rgba(47,85,22,.14);
  --scrim-deep: rgba(47,85,22,.32);
  /* Filetto su fondo pieno: bianco trasparente, quindi vale in ENTRAMBE le vesti (verde e turchese)
     senza essere rimappato. ⚠ È l'unico colore non-token ammesso nei componenti, e sta qui apposta. */
  --hairline-on-dark: rgba(255,255,255,.16);
  /* Fondo del piè: gradiente verso un verde ancora più cupo, dichiarato qui come gli altri colori. */
  --footer-deep: #1E380E;

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

  /* --- Tipografia: display geometrico (Outfit) + testo umanista ad alta leggibilità (Source Sans 3),
     entrambi OFL self-hosted. La scelta è il quarto in cui il template si MIGLIORA: PharmaCare, il
     riferimento di categoria, usa Roboto, che è il default di sistema e non dice nulla.
     Outfit è aperto e amichevole senza essere infantile; Source Sans 3 nasce per interfacce e regge
     bene i testi lunghi e fitti (foglietti, elenchi di reparto, domande frequenti). --- */
  --font-display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* scala tipografica: salto display↔testo netto ma non gridato (PharmaCare sta a h1 49 / h2 40).
     ⚠ Tarata sulla copy DEMO: sulla copy reale va misurata nel contenitore vero — i testi di questo
     verticale sono LUNGHI (paragrafi di reparto da 400+ caratteri). */
  --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.48rem); /* H3 */
  --text-xl:   clamp(1.55rem, 1.24rem + 1.4vw, 2.15rem);  /* H2 — titoli di sezione */
  --text-2xl:  clamp(1.75rem, 1.32rem + 1.8vw, 2.7rem);   /* 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.15rem, 1.5rem + 2.6vw, 3.9rem);     /* display della testata — scala ampia:
     il salto fra titolo e corpo è ciò che dà gerarchia a una pagina lunga, e la copy di questo cliente
     è fitta. ⚠ Misurato nel contenitore vero, non a naso: il titolo più lungo è «Farmacia Borsò». */

  --lh-tight: 1.1;
  --lh-snug: 1.16;
  --lh-body: 1.68;
  --tracking-label: 0.16em;      /* gli occhielli sono tracciati, mai gridati */
  --tracking-display: -0.012em;  /* Outfit si stringe appena 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 --- */
  /* Quota di larghezza della fotografia in testata. Dichiarata UNA volta: la consumano sia la colonna
     della griglia sia l'ancoraggio della figura, che devono coincidere per forza. */
  --hero-media-share: 0.535;
  --container: 1200px;
  --container-narrow: 66ch;
  --gutter: clamp(1.1rem, 0.5rem + 2.4vw, 2.2rem);

  /* --- Forma: SQUADRATA-MORBIDA. PharmaCare ha bottoni a raggio 0, iPharm la pillola piena: la via di
     mezzo tiene il tono sanitario ordinato senza la durezza del rettangolo secco. --- */
  --radius: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* --- Ombre: appena percepibili. In un registro clinico l'ombra sporca. --- */
  --shadow-sm: 0 1px 2px rgba(31,36,32,.06);
  --shadow-md: 0 6px 20px rgba(31,36,32,.08);
  /* Ombra della barra fissa su mobile: proiettata verso l'ALTO, quindi non riusa le due precedenti. */
  --shadow-bar: 0 -2px 12px rgba(31,36,32,.14);

  /* --- Movimento: sobrio; ogni transizione si spegne con prefers-reduced-motion (base.css) --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 260ms;
}