/* ============================================================
   hop & cotton — Typography tokens
   Brand fonts: Canela (→Cormorant Garamond), Brandon Grotesque
   (→Montserrat), Josefin Sans (real), Univers 47 Light.
   Body: Arial · Contrast titles: Trebuchet MS  (per 2019 guideline)
   ============================================================ */
:root {
  /* ---- Families --------------------------------------------- */
  /* Josefin Sans — brand headings & the lowercase wordmark feel  */
  --font-display: 'Josefin Sans', 'Century Gothic', sans-serif;
  /* Cormorant Garamond — editorial serif accents & pull-quotes   */
  /* (SUBSTITUTE for Canela — not yet supplied)                   */
  --font-serif:   'Cormorant Garamond', 'Canela', Georgia, serif;
  /* Brandon Grotesque — body copy & UI                           */
  --font-sans:    'Brandon Grotesque', 'Montserrat', Arial, sans-serif;
  /* Univers — accessory / tabular & data contexts                */
  --font-univers: 'Univers', 'Helvetica Neue', Arial, sans-serif;
  /* System body fallback per guideline                            */
  --font-body:    var(--font-sans);
  --font-mono:    'SFMono-Regular', ui-monospace, Menlo, monospace;

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

  /* ---- Fluid type scale (1.250 major-third-ish) ------------- */
  --fs-display:  clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem);  /* @kind other */
  --fs-h1:       clamp(2.1rem, 1.4rem + 2.8vw, 3.25rem);   /* @kind other */
  --fs-h2:       clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);   /* @kind other */
  --fs-h3:       clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);    /* @kind other */
  --fs-h4:       1.25rem;     /* @kind other */
  --fs-lead:     1.1875rem;   /* @kind other */
  --fs-body:     1rem;        /* @kind other */
  --fs-sm:       0.875rem;    /* @kind other */
  --fs-xs:       0.75rem;     /* @kind other */
  --fs-eyebrow:  0.78rem;     /* @kind other */

  /* ---- Line heights ----------------------------------------- */
  --lh-tight:   1.08;  /* @kind other */
  --lh-snug:    1.25;  /* @kind other */
  --lh-normal:  1.5;   /* @kind other */
  --lh-relaxed: 1.7;   /* @kind other */

  /* ---- Letter spacing --------------------------------------- */
  --ls-tight:    -0.01em;  /* @kind other */
  --ls-normal:   0;        /* @kind other */
  --ls-wide:     0.04em;   /* @kind other */
  --ls-eyebrow:  0.18em;   /* @kind other */
  --ls-wordmark: 0.02em;   /* @kind other */
}

/* ---- Editorial helper classes (optional) -------------------- */
.hc-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.hc-display {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}
.hc-serif-quote {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--text-body);
}