/* ============================================================
   Flowerista — Typography tokens
   Four primary typefaces (Cap. 4):
   · Syne     — main display titles, website headlines, "Quick wins"
   · Work Sans— headings/subtitles, fucsia site titles, "Glossario"
   · Anton    — strong accents, category labels, deck eyebrows
   · Poppins  — body copy (bold = emphasis, italic = quotes / EN terms)
   ============================================================ */
:root {
  /* ---- Font families ---- */
  --font-display: "Syne", "Work Sans", system-ui, sans-serif;       /* H1 / hero */
  --font-heading: "Work Sans", "Helvetica Neue", Arial, sans-serif; /* H2-H4 */
  --font-accent:  "Anton", "Arial Narrow", Impact, sans-serif;      /* eyebrows, labels */
  --font-body:    "Poppins", "Work Sans", system-ui, sans-serif;    /* paragraphs, UI */

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-extra:   800; /* @kind font */
  --fw-black:   900; /* @kind font */

  /* ---- Type scale (1.250 major-third, rem-based) ---- */
  --text-2xs:  0.6875rem; /* 11px — micro labels */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px — body default */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.375rem;  /* 22px */
  --text-xl:   1.75rem;   /* 28px */
  --text-2xl:  2.25rem;   /* 36px */
  --text-3xl:  3rem;      /* 48px */
  --text-4xl:  4rem;      /* 64px */
  --text-5xl:  5.25rem;   /* 84px — hero display */

  /* ---- Line heights ---- */
  --leading-tight:   1.04; /* display */
  --leading-snug:    1.18; /* headings */
  --leading-normal:  1.5;  /* body */
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-display: -0.02em;  /* Syne titles run tight */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-label:   0.14em;   /* Anton eyebrows / category labels */
  --tracking-wide:    0.22em;   /* INNOVATION HUB style spacing */

  /* ---- Semantic roles ---- */
  --role-hero-font:    var(--font-display);
  --role-hero-weight:  var(--fw-bold);
  --role-title-font:   var(--font-heading);
  --role-title-weight: var(--fw-bold);
  --role-eyebrow-font: var(--font-accent);
  --role-body-font:    var(--font-body);
}

/* ============================================================
   Optional utility classes — opt in, never auto-applied to tags.
   ============================================================ */
.fl-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
}
.fl-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.fl-subtitle {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--text-strong);
}
.fl-eyebrow {
  font-family: var(--font-accent);
  font-weight: var(--fw-regular);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}
.fl-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
}
.fl-body strong { font-weight: var(--fw-bold); color: var(--text-strong); }
.fl-body em     { font-style: italic; }