/* ============================================================
   Recepzia · Typography tokens
   A characterful display grotesque + a humanist sans + a mono
   for the "back of house" technical labels.
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, 'SFMono-Regular', monospace;

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

  /* ---- Fluid display sizes (clamp: min → fluid → max) ---- */
  --fs-display: clamp(2.75rem, 1.6rem + 5.6vw, 5.5rem); /* @kind other */
  --fs-h1: clamp(2.25rem, 1.5rem + 3.5vw, 3.75rem); /* @kind other */
  --fs-h2: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem); /* @kind other */
  --fs-h3: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); /* @kind other */
  --fs-h4: clamp(1.15rem, 1.02rem + 0.5vw, 1.35rem); /* @kind other */

  /* ---- Text sizes ---- */
  --fs-lead: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); /* @kind other */
  --fs-body: 1.0625rem; /* @kind other */
  --fs-sm: 0.9375rem; /* @kind other */
  --fs-xs: 0.8125rem; /* @kind other */
  --fs-eyebrow: 0.78125rem; /* @kind other */

  /* ---- Line heights ---- */
  --lh-tight: 1.04; /* @kind other */
  --lh-snug: 1.18; /* @kind other */
  --lh-normal: 1.5; /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-display: -0.022em; /* @kind other */
  --ls-heading: -0.012em; /* @kind other */
  --ls-body: 0em; /* @kind other */
  --ls-eyebrow: 0.16em; /* @kind other */

  /* ---- Semantic roles (font shorthand) ---- */
  --type-display: var(--fw-bold) var(--fs-display)/var(--lh-tight) var(--font-display); /* @kind other */
  --type-h1: var(--fw-bold) var(--fs-h1)/var(--lh-snug) var(--font-display); /* @kind other */
  --type-h2: var(--fw-bold) var(--fs-h2)/var(--lh-snug) var(--font-display); /* @kind other */
  --type-h3: var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-display); /* @kind other */
  --type-lead: var(--fw-regular) var(--fs-lead)/var(--lh-relaxed) var(--font-body); /* @kind other */
  --type-body: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-body); /* @kind other */
  --type-eyebrow: var(--fw-medium) var(--fs-eyebrow)/1 var(--font-mono); /* @kind other */
}