/* =========================
   Fonts
========================= */

$font-family-base: "Plus Jakarta Sans", "Inter", "SF Pro Display", system-ui, -apple-system, sans-serif;

// Font weights available in the design system
$font-weight-regular:  400;
$font-weight-medium:   500;
$font-weight-semibold: 600;
$font-weight-bold:     700;

/* =========================
   Typography scale
   Extracted from Figma Style Guide → Typography.
   Format: weight / font-size / line-height / letter-spacing.
========================= */

// Headings — mobile (default, can be overridden at breakpoints)
$heading-display-mobile:  (bold, 32px, 40px, -0.02em);
$heading-1-mobile:        (bold, 28px, 36px, -0.02em);
$heading-2-mobile:        (bold, 24px, 32px, -0.01em);
$heading-3-mobile:        (semibold, 20px, 28px, 0);
$heading-4-mobile:        (semibold, 18px, 26px, 0);
$heading-5-mobile:        (semibold, 16px, 24px, 0);
$heading-6-mobile:        (semibold, 14px, 20px, 0);

// Headings — desktop
$heading-display-desktop: (bold, 48px, 56px, -0.02em);
$heading-1-desktop:       (bold, 40px, 48px, -0.02em);
$heading-2-desktop:       (bold, 32px, 40px, -0.01em);
$heading-3-desktop:       (semibold, 28px, 34px, 0);
$heading-4-desktop:       (semibold, 22px, 30px, 0);
$heading-5-desktop:       (semibold, 18px, 26px, 0);
$heading-6-desktop:       (semibold, 16px, 22px, 0);

// Body — mobile
$body-large-mobile:  (regular, 18px, 26px, 0);
$body-medium-mobile: (regular, 16px, 24px, 0);
$body-small-mobile:  (regular, 14px, 20px, 0);
$body-xsmall-mobile: (regular, 12px, 16px, 0);

// Body — desktop
$body-large-desktop:  (regular, 20px, 32px, 0);
$body-medium-desktop: (regular, 18px, 28px, 0);
$body-small-desktop:  (regular, 16px, 24px, 0);
$body-xsmall-desktop: (regular, 14px, 20px, 0);

// Button
$button-mobile:  (semibold, 15px, 20px, 0);
$button-desktop: (semibold, 16px, 22px, 0);

// Caption / overline
$caption-mobile: (regular, 11px, 14px, -0.01em);
$caption-desktop:(regular, 12px, 16px, -0.01em);
$overline-mobile: (medium, 12px, 14px, -0.008em);
$overline-desktop:(regular, 12px, 16px, -0.008em);