/* ============================================
   TYPOGRAPHY - Centralized Font System
   Best Practice: Define all typography in one place
   ============================================ */

:root {
  /* Font Family */
  --font-primary: "Montserrat", sans-serif;
  --font-secondary: "Montserrat", sans-serif;

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

  /* ============ MOBILE - Small Screens (< 600px) ============ */
  
  /* Headings */
  --font-size-h1-mobile: 28px;
  --font-size-h2-mobile: 24px;
  --font-size-h3-mobile: 18px;
  --font-size-h4-mobile: 16px;

  /* Body Text */
  --font-size-body-mobile: 16px;
  --font-size-body-small-mobile: 14px;
  --font-size-body-tiny-mobile: 12px;

  /* Line Heights (for readability) */
  --line-height-heading-mobile: 1.3;
  --line-height-body-mobile: 1.6;

  /* ============ DESKTOP - Large Screens (≥ 600px) ============ */

  /* Headings */
  --font-size-h1-desktop: 48px;
  --font-size-h2-desktop: 36px;
  --font-size-h3-desktop: 28px;
  --font-size-h4-desktop: 24px;

  /* Body Text */
  --font-size-body-desktop: 18px;
  --font-size-body-small-desktop: 16px;
  --font-size-body-tiny-desktop: 14px;

  /* Line Heights (for readability) */
  --line-height-heading-desktop: 1.4;
  --line-height-body-desktop: 1.75;
}

/* ========== BASE TYPOGRAPHY STYLES ========== */

body {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body-mobile);
  line-height: var(--line-height-body-mobile);
  color: #333;
}

/* Headings */
h1, .h1 {
  font-size: var(--font-size-h1-mobile);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading-mobile);
  margin: 24px 0 16px 0;
}

h2, .h2 {
  font-size: var(--font-size-h2-mobile);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading-mobile);
  margin: 20px 0 12px 0;
}

h3, .h3 {
  font-size: var(--font-size-h3-mobile);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading-mobile);
  margin: 16px 0 10px 0;
}

h4, .h4 {
  font-size: var(--font-size-h4-mobile);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading-mobile);
  margin: 12px 0 8px 0;
  color: #922e31;
}

/* Paragraph */
p, .body {
  font-size: var(--font-size-body-mobile);
  line-height: var(--line-height-body-mobile);
  margin: 0 0 16px 0;
}

p.small, .body-small {
  font-size: var(--font-size-body-small-mobile);
  line-height: var(--line-height-body-mobile);
}

p.tiny, .body-tiny {
  font-size: var(--font-size-body-tiny-mobile);
  line-height: var(--line-height-body-mobile);
}

/* Emphasis */
strong, b {
  font-weight: var(--font-weight-semibold);
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--font-size-body-tiny-mobile);
}



/* ========== DESKTOP TYPOGRAPHY (≥720px) ========== */

@media only screen and (min-width: 720px) {
  /* Update root variables for desktop */
  :root {
    --font-size-h1-desktop: 48px;
    --font-size-h2-desktop: 36px;
    --font-size-h3-desktop: 28px;
    --font-size-h4-desktop: 24px;
    --font-size-body-desktop: 18px;
    --font-size-body-small-desktop: 16px;
    --font-size-body-tiny-desktop: 14px;
  }

  body {
    font-size: var(--font-size-body-desktop);
    line-height: var(--line-height-body-desktop);
  }

  h1, .h1 {
    font-size: var(--font-size-h1-desktop);
    line-height: var(--line-height-heading-desktop);
    margin: 32px 0 24px 0;
  }

  h2, .h2 {
    font-size: var(--font-size-h2-desktop);
    line-height: var(--line-height-heading-desktop);
    margin: 28px 0 16px 0;
  }

  h3, .h3 {
    font-size: var(--font-size-h3-desktop);
    line-height: var(--line-height-heading-desktop);
    margin: 24px 0 12px 0;
  }

  h4, .h4 {
    font-size: var(--font-size-h4-desktop);
    line-height: var(--line-height-heading-desktop);
    margin: 20px 0 12px 0;
  }

  p, .body {
    font-size: var(--font-size-body-desktop);
    line-height: var(--line-height-body-desktop);
  }

  p.small, .body-small {
    font-size: var(--font-size-body-small-desktop);
  }

  p.tiny, .body-tiny {
    font-size: var(--font-size-body-tiny-desktop);
  }

  small {
    font-size: var(--font-size-body-tiny-desktop);
  }
}