/* tokens.css — design genome health_professional. Palette teal "clinico-rassicurante" (P1): neutri freddi
   + un accento teal. Vocabolario CHIUSO di token semantici: la sorgente da cui deriva theme.json. I nomi dei
   ruoli colore coincidono 1:1 con palette_roles dell'IR. Contrasti WCAG AA verificati su tutte le coppie di
   testo (ink/accent-ink su chiaro, on-dark su scuro, bianco su accento). Niente valori fuori da qui. */
:root {
  /* --- Colore (teal clinico) --- */
  --brand-dark: #0B2B2E;  /* teal profondo: hero/footer scuri */
  --brand:      #0E3B3A;  /* teal scuro: superfici scure */
  --brand-mid:  #2A5E5A;  /* teal medio: hover/superfici scure intermedie */
  --sage:       #2C8C84;  /* teal chiaro: accenti non-testo su chiaro */
  --sage-light: #5BA79F;  /* teal chiaro tenue */
  --sage-tint:  #D6EAE8;  /* tint teal per icone/superfici */
  --accent-ink: #0C5F58;  /* accento TESTO su chiaro (AA 7.5:1 su carta) */
  --accent:     #0F766E;  /* accento teal: CTA, filetti, numerali (bianco 5.5:1) */
  --accent-dark:#5EEAD4;  /* accento su fondo scuro (10:1 su teal profondo) */

  --paper:   #FFFFFF;  /* fondo pagina */
  --surface: #EEF4F4;  /* sezioni alternate, card */
  --ink:     #17323A;  /* testo principale (13.5:1 su carta) */
  --ink-muted:#48606A; /* testo secondario su chiaro (6.6:1 su carta) */
  --line:    #D5E1E1;  /* bordi/divisori (non-testo) */
  --on-dark: #E6F0EF;  /* testo su superfici scure (12.9:1 su teal profondo) */
  --on-dark-muted:#A7C0BD; /* testo secondario su scuro */
  --focus:   #0F766E;  /* anello di focus */

  /* --- Ruoli semantici --- */
  --bg: var(--paper);
  --fg: var(--ink);

  /* --- Tipografia: Source Sans 3 (display + testo + label), OFL self-hosted (zero-live) --- */
  /* Registro caldo-umanista: le micro-label (eyebrow/numerali) restano sullo stesso sans, non su un mono
     tecnico. --font-mono resta come alias del sans così i componenti non vanno riscritti. */
  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: var(--font-sans);

  --text-xs:  0.8125rem;  /* 13px */
  --text-sm:  0.9375rem;  /* 15px */
  --text-base: 1.0625rem; /* 17px corpo */
  --text-md:  1.1875rem;  /* 19px lead */
  --text-lg:  1.4375rem;  /* 23px H3 */
  --text-xl:  clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  --text-2xl: clamp(1.95rem, 1.4rem + 2.3vw, 2.8rem);   /* display sezione */
  --text-3xl: clamp(2.4rem, 1.6rem + 3.4vw, 3.6rem);    /* display hero */

  --lh-tight: 1.14;
  --lh-snug: 1.26;
  --lh-body: 1.65;
  --tracking-label: 0.14em; /* eyebrow uppercase */

  /* --- Spaziatura (ritmo ampio, clinico-ariosa) --- */
  --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: 6rem; --space-10: 8rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  /* --- Layout --- */
  --container: 1140px;
  --container-narrow: 720px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);

  /* --- Forma (morbida-clinica) --- */
  --radius: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --border: 1px solid var(--line);

  /* --- Ombre (leggere) --- */
  --shadow-sm: 0 1px 2px rgba(11,43,46,.06), 0 2px 10px rgba(11,43,46,.05);
  --shadow-md: 0 8px 24px rgba(11,43,46,.09), 0 2px 8px rgba(11,43,46,.06);

  /* --- Scrim hero: garantisce il contrasto del testo chiaro sopra la foto duotone --- */
  --scrim: linear-gradient(168deg, rgba(11,43,46,.30) 0%, rgba(11,43,46,.55) 55%, rgba(11,43,46,.82) 100%);

  /* --- Motion (sobria) --- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur: 200ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}