/* ============================================================
   HOUSE OF CHICORY — TYPOGRAPHY
   ------------------------------------------------------------
   Pairing logic:
   • Newsreader (serif, optical sizes) → DISPLAY & EDITORIAL.
     Gives the brand its premium, considered, magazine-grade
     voice. Used for hero headlines, section titles, pull quotes.
   • Hanken Grotesk (grotesque sans) → UI & BODY. Neutral,
     warm, highly legible at long lengths and small UI sizes.
   • IBM Plex Mono → DATA, SPEC SHEETS, LABELS, EYEBROWS.
     Communicates "food science / precision" and gives tabular
     figures for production data, certifications and stats.
   Type is set tight and large; whitespace does the work.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

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

  /* ---- Type scale (1.250 major-third, tuned) ----
     Each step pairs a size with its intended line-height. */
  --text-2xs:  0.6875rem;  /* 11px — micro labels */
  --text-xs:   0.75rem;    /* 12px — eyebrows, meta */
  --text-sm:   0.875rem;   /* 14px — captions, UI dense */
  --text-base: 1rem;       /* 16px — body default */
  --text-md:   1.125rem;   /* 18px — lead body */
  --text-lg:   1.375rem;   /* 22px */
  --text-xl:   1.75rem;    /* 28px */
  --text-2xl:  2.25rem;    /* 36px */
  --text-3xl:  2.875rem;   /* 46px */
  --text-4xl:  3.75rem;    /* 60px */
  --text-5xl:  4.75rem;    /* 76px */
  --text-6xl:  6rem;       /* 96px — hero display */

  /* ---- Line heights ---- */
  --leading-none:    1;      /* @kind other */
  --leading-tight:   1.08; /* @kind other */
  --leading-snug:    1.22; /* @kind other */
  --leading-normal:  1.5; /* @kind other */
  --leading-relaxed: 1.65; /* @kind other */

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.03em;  /* large serif display */
  --tracking-tight:   -0.015em; /* headings */
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;   /* sans small caps / buttons */
  --tracking-wider:   0.14em;   /* mono eyebrows / labels */

  /* ---- Semantic role tokens ---- */
  --display-font:   var(--font-display);
  --heading-font:   var(--font-display);
  --body-font:      var(--font-sans);
  --ui-font:        var(--font-sans);
  --eyebrow-font:   var(--font-mono);
  --data-font:      var(--font-mono);

  /* numeric features */
  --num-tabular: "tnum" 1, "lnum" 1; /* @kind font */
}

/* ---- Reusable type roles (optional helper classes) ---- */
.t-eyebrow {
  font-family: var(--eyebrow-font);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--brand-secondary);
}
.t-display {
  font-family: var(--display-font);
  font-weight: var(--fw-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--text-strong);
}
.t-heading {
  font-family: var(--heading-font);
  font-weight: var(--fw-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.t-body {
  font-family: var(--body-font);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}
.t-data {
  font-family: var(--data-font);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tracking-normal);
}

/* ---- Responsive display: fluid hero headline ---- */
.t-display-fluid {
  font-family: var(--display-font);
  font-weight: var(--fw-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  font-size: clamp(2.5rem, 1.2rem + 5.2vw, 6rem);
}