/* Romano Battiti Design System — Typography Tokens */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
}

:root {
  /* ── Font families ── */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-sans:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Font sizes ──
     Fino a xl restano fissi: sono testi di UI, non devono muoversi.
     Da 2xl in su diventano fluidi con clamp(), altrimenti un titolo da 48px
     occupa mezza riga su uno schermo da 375px. Il minimo del clamp è la
     dimensione minima leggibile, il massimo il valore desktop originale. */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   19px;
  --text-2xl:  clamp(20px, 3.2vw, 24px);
  --text-3xl:  clamp(24px, 4.2vw, 32px);
  --text-4xl:  clamp(26px, 4.8vw, 36px);
  --text-5xl:  clamp(30px, 6.4vw, 48px);

  /* ── Line heights ── */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* ── Letter spacing ── */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;

  /* ── Font weights ── */
  --weight-normal:  400;
  --weight-medium:  500;
  --weight-bold:    700;
}