/* ==========================================================================
   Globopharma — design tokens (variabili CSS + base tipografica)
   Nessun componente qui dentro: solo il "vocabolario" di colori e spaziature
   condiviso da tutte le pagine. In una futura migrazione a React questo
   file può diventare il tema/i design token importati una sola volta
   (CSS custom properties restano valide dentro qualunque componente).
   ========================================================================== */

:root{
  /* Divisione Laboratorio */
  --lab: #752535;
  --lab-dark: #5A1C29;
  --lab-soft: #F5E7EA;
  --lab-blue: #3E5C76;
  --lab-blue-soft: #E7EEF3;
  --lab-amber: #B7791F;
  --lab-amber-soft: #FBF0DE;
  --lab-plum: #8B3A62;
  --lab-plum-soft: #F6E8EF;
  --lab-sage: #5B7553;
  --lab-sage-soft: #E8EFE6;

  /* Divisione Farmaceutica */
  --farma: #96660F;
  --farma-dark: #6E4A08;
  --farma-soft: #FBF0DE;

  --ink: #12181A;
  --muted: #5C6B68;
  --line: #E3E8E6;
  --bg-tint: #F8F4F2;

  /* Layout */
  --page-x: 64px; /* padding orizzontale usato in quasi tutte le sezioni */
}
/* Telefoni: margini laterali ridotti (tutte le sezioni leggono --page-x) */
@media (max-width:768px){
  :root{ --page-x: 20px; }
}

body{
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--ink);
}
/* Le pagine interne (non a tutta larghezza come le home) restano leggibili
   anche su monitor molto larghi: contenuto centrato, max 1440px, come nel mockup. */
.page-shell{ max-width:1440px; margin:0 auto; }
h1, h2, h3, h4, .display{
  font-family: 'Space Grotesk', system-ui, sans-serif;
}