/* ============================================================
   Kizzy Design System — Typography
   Source of truth: Figma "Kizzy Design System"
   fileKey: WKYX66HuvsbviSPqN8BTOV  (Fonts frame 19:1567)

   Lexend ONLY (Google Fonts). Weights 400 / 500 / 600 / 700.
   All line-heights are Figma "auto" ≈ 1.25 (e.g. Display-1: 56/70).
   Letter-spacing is 0 on EVERYTHING.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&display=swap');

:root {
  --font-family: 'Lexend', sans-serif;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Type scale (px) */
  --fs-display-1: 56px;
  --fs-display-2: 48px;
  --fs-display-3: 40px;
  --fs-h1: 32px;
  --fs-h2: 28px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-h5: 16px;
  --fs-text-1: 14px;
  --fs-text-2: 12px;
  --fs-auxiliary: 11px;

  /* Line-height: Figma auto ≈ 1.25 across the whole scale */
  --lh-auto: 1.25;

  /* Exact px line-heights as documented on the live Figma Fonts sheet
     (56/70, 48/60, 40/50, 32/40, 28/35, 24/30, 20/25, 16/20, 14/18, 12/15, 11/14).
     Use these when pixel-matching Figma; --lh-auto otherwise. */
  --lh-display-1: 70px;
  --lh-display-2: 60px;
  --lh-display-3: 50px;
  --lh-h1: 40px;
  --lh-h2: 35px;
  --lh-h3: 30px;
  --lh-h4: 25px;
  --lh-h5: 20px;
  --lh-text-1: 18px;
  --lh-text-2: 15px;
  --lh-auxiliary: 14px;

  /* Letter-spacing: 0 everywhere — no exceptions */
  --ls-none: 0;
}

/* Helper classes — size/leading/tracking only.
   Weight is chosen per usage (400/500/600/700); e.g. buttons are SemiBold 600. */
.kz-display-1 { font-family: var(--font-family); font-size: var(--fs-display-1); line-height: var(--lh-auto); letter-spacing: var(--ls-none); }
.kz-display-2 { font-family: var(--font-family); font-size: var(--fs-display-2); line-height: var(--lh-auto); letter-spacing: var(--ls-none); }
.kz-display-3 { font-family: var(--font-family); font-size: var(--fs-display-3); line-height: var(--lh-auto); letter-spacing: var(--ls-none); }
.kz-h1        { font-family: var(--font-family); font-size: var(--fs-h1);        line-height: var(--lh-auto); letter-spacing: var(--ls-none); }
.kz-h2        { font-family: var(--font-family); font-size: var(--fs-h2);        line-height: var(--lh-auto); letter-spacing: var(--ls-none); }
.kz-h3        { font-family: var(--font-family); font-size: var(--fs-h3);        line-height: var(--lh-auto); letter-spacing: var(--ls-none); }
.kz-h4        { font-family: var(--font-family); font-size: var(--fs-h4);        line-height: var(--lh-auto); letter-spacing: var(--ls-none); }
.kz-h5        { font-family: var(--font-family); font-size: var(--fs-h5);        line-height: var(--lh-auto); letter-spacing: var(--ls-none); }
.kz-text-1    { font-family: var(--font-family); font-size: var(--fs-text-1);    line-height: var(--lh-auto); letter-spacing: var(--ls-none); }
.kz-text-2    { font-family: var(--font-family); font-size: var(--fs-text-2);    line-height: var(--lh-auto); letter-spacing: var(--ls-none); }
.kz-auxiliary { font-family: var(--font-family); font-size: var(--fs-auxiliary); line-height: var(--lh-auto); letter-spacing: var(--ls-none); }