/* ===========================================================================
   TYPOGRAPHY — Il Mondo delle Erbe
   ---------------------------------------------------------------------------
   Cormorant       — display serif. Headlines, hero, pull quotes. Elegant,
                     high-contrast; the apothecary voice that echoes the logo.
   Source Sans 3   — UI + body. The open analog of the brand's Myriad Pro.
   Oswald          — condensed (OFL). Eyebrows, prices, shelf labels, signage.
   =========================================================================== */

:root {
  /* --- Families ----------------------------------------------------------- */
  --font-display:   'Cormorant', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-serif:     'Cormorant', Georgia, 'Times New Roman', serif;
  --font-sans:      'Source Sans 3', 'Myriad Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-condensed: 'Oswald', 'Arial Narrow', 'Source Sans 3', sans-serif;
  --font-mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* --- Type scale (rem; root = 16px) -------------------------------------- */
  --text-2xs:  0.75rem;    /* 12 — micro labels (UI floor) */
  --text-xs:   0.8125rem;  /* 13 — captions, meta */
  --text-sm:   0.9375rem;  /* 15 — secondary, dense UI */
  --text-base: 1.0625rem;  /* 17 — body default (warm, readable) */
  --text-lg:   1.25rem;    /* 20 — lead paragraph */
  --text-xl:   1.5rem;     /* 24 — small headings */
  --text-2xl:  1.875rem;   /* 30 */
  --text-3xl:  2.5rem;     /* 40 */
  --text-4xl:  3.25rem;    /* 52 */
  --text-5xl:  4.5rem;     /* 72 */
  --text-6xl:  6rem;       /* 96 — hero display */

  /* --- Weights ------------------------------------------------------------ */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    700;  /* Oswald si ferma a 700: evita la sintesi del browser */

  /* --- Line height -------------------------------------------------------- */
  --leading-none:    1;
  --leading-tight:   1.08;  /* display */
  --leading-snug:    1.22;  /* headings */
  --leading-normal:  1.5;   /* UI */
  --leading-relaxed: 1.66;  /* long-form reading */

  /* --- Letter spacing ----------------------------------------------------- */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.03em;
  --tracking-wider:   0.12em;   /* condensed eyebrows */
  --tracking-widest:  0.22em;   /* signage caps */

  /* =========================================================================
     ROLE TOKENS — composite shortcuts (font / size / weight)
     ======================================================================= */
  --type-display:   var(--weight-semibold) var(--text-6xl)/var(--leading-tight) var(--font-display);
  --type-h1:        var(--weight-semibold) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --type-h2:        var(--weight-medium)   var(--text-3xl)/var(--leading-snug)  var(--font-display);
  --type-h3:        var(--weight-semibold) var(--text-xl)/var(--leading-snug)   var(--font-sans);
  --type-lead:      var(--weight-regular)  var(--text-lg)/var(--leading-relaxed) var(--font-sans);
  --type-body:      var(--weight-regular)  var(--text-base)/var(--leading-relaxed) var(--font-sans);
  --type-ui:        var(--weight-medium)   var(--text-sm)/var(--leading-normal) var(--font-sans);
  --type-caption:   var(--weight-regular)  var(--text-xs)/var(--leading-normal) var(--font-sans);
}

/* Eyebrow / signage helper — the brand's condensed voice.
   Apply on an element:  font: var(--type-eyebrow); */
:root {
  --type-eyebrow: var(--weight-black) var(--text-sm)/1 var(--font-condensed);
}