/* ============================================================
   HALF NUTS CO — TYPOGRAPHY TOKENS
   Two voices:
   • Rubik — rounded, chunky, confident. Product names + headlines
     (Black 900), back-of-pack storytelling (ExtraBold 800),
     legal/nutrition (Bold 700 / Medium 500).
   • Saira Condensed — the condensed "tertiary" voice for body copy,
     descriptions and key-word highlights. On-pack it runs ~90%
     horizontal scale, ALL CAPS, tight.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display:   'Rubik', system-ui, -apple-system, sans-serif;
  --font-body:      'Rubik', system-ui, -apple-system, sans-serif;
  --font-condensed: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;

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

  /* ---- Display sizes (Rubik Black) ---- */
  --fs-hero:      clamp(48px, 7vw, 92px); /* @kind font */
  --fs-display:   clamp(36px, 5vw, 64px); /* @kind font */
  --fs-title:     clamp(28px, 3.4vw, 44px); /* @kind font */
  --fs-headline:  28px; /* @kind font */
  --fs-subtitle:  22px; /* @kind font */

  /* ---- Body & UI ---- */
  --fs-lead:      20px; /* @kind font */
  --fs-body:      17px; /* @kind font */
  --fs-small:     15px; /* @kind font */
  --fs-caption:   13px; /* @kind font */
  --fs-micro:     11px; /* @kind font */

  /* ---- Line heights ---- */
  --lh-tight:     0.95; /* @kind font */
  --lh-snug:      1.08; /* @kind font */
  --lh-body:      1.5; /* @kind font */
  --lh-relaxed:   1.6; /* @kind font */

  /* ---- Tracking ---- */
  --ls-display:   -0.01em; /* @kind font */
  --ls-condensed: 0.04em; /* @kind font */
  --ls-eyebrow:   0.14em; /* @kind font */

  /* On-pack condensed type is set ~90% horizontal scale. Apply
     transform: scaleX(var(--display-squish)) to recreate it. */
  --display-squish: 0.92; /* @kind other */
}