/* ─────────────────────────────────────────────────────────────────────────
   Typography tokens — mirrors "6. Typography" Figma variable collection
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Safiro';
  src: url('/ds/fonts/Safiro-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Safiro';
  src: url('/ds/fonts/Safiro-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Safiro';
  src: url('/ds/fonts/Safiro-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Safiro';
  src: url('/ds/fonts/Safiro-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

:root {
  /* ── Font family ─────────────────────────────── */
  --font-family-display: 'Safiro', sans-serif;
  --font-family-body:    'Public Sans', sans-serif;
  --font-family-heading: 'Public Sans', sans-serif;   /* not in Figma — same as body */
  --font-family-mono:    'JetBrains Mono', 'SFMono-Regular', monospace; /* not in Figma */

  /* ── Font weight ─────────────────────────────── */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ── Font size ───────────────────────────────── */
  --font-size-text-xs:     0.75rem;   /* 12px */
  --font-size-text-sm:    0.875rem;   /* 14px */
  --font-size-text-md:       1rem;   /* 16px */
  --font-size-text-lg:   1.125rem;   /* 18px */
  --font-size-text-xl:    1.25rem;   /* 20px */
  --font-size-display-xs:   1.5rem;   /* 24px */
  --font-size-display-sm: 1.875rem;   /* 30px */
  --font-size-display-md: 2.25rem;    /* 36px */
  --font-size-display-lg:    3rem;    /* 48px */
  --font-size-display-xl: 3.75rem;    /* 60px */
  --font-size-display-2xl:  4.5rem;   /* 72px */

  /* ── Line height ─────────────────────────────── */
  --line-height-text-xs:     1.125rem;  /* 18px */
  --line-height-text-sm:      1.25rem;  /* 20px */
  --line-height-text-md:       1.5rem;  /* 24px */
  --line-height-text-lg:      1.75rem;  /* 28px */
  --line-height-text-xl:     1.875rem;  /* 30px */
  --line-height-display-xs:     2rem;   /* 32px */
  --line-height-display-sm:  2.375rem;  /* 38px */
  --line-height-display-md:  2.75rem;   /* 44px */
  --line-height-display-lg:  3.75rem;   /* 60px */
  --line-height-display-xl:    4.5rem;  /* 72px */
  --line-height-display-2xl: 5.625rem;  /* 90px */
}