/* ============================================================
   The Better Whisk — Typography Tokens
   Editorial serif system. Playfair Display for high-contrast
   display & wordmark; EB Garamond for body, navigation, eyebrows,
   and buttons (set in letter-spaced small caps). Arabic uses Noto.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-serif:   'EB Garamond', 'Cormorant Garamond', Georgia, serif;   /* body + UI */
  --font-body:    var(--font-serif);
  --font-accent:  'Cormorant Garamond', 'EB Garamond', Georgia, serif;   /* italic flourishes */
  --font-arabic-display: 'Noto Kufi Arabic', 'Noto Naskh Arabic', serif;
  --font-arabic-body:    'Noto Naskh Arabic', 'Noto Kufi Arabic', serif;

  /* ---- Weights ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ---- Fluid display scale (hero → small head) ---- */
  --text-display-xl: clamp(3.75rem, calc(2.4rem + 5.4vw), 6.5rem);  /* 60 → 104  hero wordmark */
  --text-display-l:  clamp(2.75rem, calc(1.9rem + 3.2vw), 4rem);    /* 44 → 64   section H2 */
  --text-display-m:  clamp(2rem, calc(1.55rem + 1.8vw), 2.75rem);   /* 32 → 44   sub-section */
  --text-display-s:  clamp(1.6rem, calc(1.4rem + 0.9vw), 2.125rem); /* 25.6→34   names */

  /* ---- Fixed UI / text scale ---- */
  --text-h3:     1.5rem;     /* 24  product titles */
  --text-h4:     1.25rem;    /* 20 */
  --text-lead:   1.3125rem;  /* 21  intro paragraphs */
  --text-body-lg:1.1875rem;  /* 19  body large */
  --text-body:   1.0625rem;  /* 17  body */
  --text-sm:     0.9375rem;  /* 15 */
  --text-xs:     0.8125rem;  /* 13  eyebrow / meta */

  /* ---- Eyebrow (letter-spaced caps label) ---- */
  --eyebrow-size:    0.8125rem;  /* 13 */
  --eyebrow-spacing: 0.28em;
  --eyebrow-weight:  var(--weight-medium);

  /* ---- Line heights ---- */
  --leading-tight:   1.08;   /* display */
  --leading-snug:    1.2;    /* sub-heads */
  --leading-normal:  1.45;
  --leading-relaxed: 1.65;   /* body copy */
  --leading-loose:   1.8;

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.18em;   /* nav / buttons */
  --tracking-eyebrow:0.28em;
}