/*
  Base Styles (Desktop First)
  These styles apply to desktop (screen width 1024px and up)
*/

:root {
  /* Defining weights */
  --font-weight-bold: 700;
  --font-weight-semi-bold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
}


/* --- Heading Tags & Utility Classes (Desktop Styles) --- */

/* H1: Hero titles (48px) */
h1, .h1 {
  font-size: 48px;
  line-height: 1.2; /* 120% */
  font-weight: var(--font-weight-bold);
}

/* H2: Section headers (40px) */
h2, .h2 {
  font-size: 40px;
  line-height: 1.2; /* 120% */
  font-weight: var(--font-weight-semi-bold);
}

/* H3: Subsection titles (32px) */
h3, .h3 {
  font-size: 32px;
  line-height: 1.25; /* 125% */
  font-weight: var(--font-weight-semi-bold);
}

/* H4: Card titles, subtitles (24px) */
h4, .h4 {
  font-size: 24px;
  line-height: 1.3; /* 130% */
  font-weight: var(--font-weight-semi-bold);
}

/* H5: Subheadings (20px) */
h5, .h5 {
  font-size: 20px;
  line-height: 1.4; /* 140% */
  font-weight: var(--font-weight-medium);
}

/* H6: Small section labels (18px) */
h6, .h6 {
  font-size: 18px;
  line-height: 1.4; /* 140% */
  font-weight: var(--font-weight-medium);
}


/* --- Body & Utility Text (Desktop Styles) --- */

.body-large {
  font-size: 18px;
  line-height: 1.6; /* 160% */
  font-weight: var(--font-weight-regular);
}

/* Body Regular (Paragraphs) -- Applies to p tag and .body-regular class */
p, .body-regular {
  font-size: 16px;
  line-height: 1.6; /* 160% */
  font-weight: var(--font-weight-regular);
}

.body-small {
  font-size: 14px;
  line-height: 1.6; /* 160% */
  font-weight: var(--font-weight-regular);
}

.caption {
  font-size: 12px;
  line-height: 1.4; /* 140% */
  font-weight: var(--font-weight-medium);
}

.button-text {
  font-size: 16px;
  line-height: 1.3; /* 130% */
  font-weight: var(--font-weight-semi-bold);
}


/*
  --- Media Query for Tablet (max-width: 1023px) ---
  Overrides for Tablet sizes.
*/
@media (max-width: 1023px) {
  /* Headings */
  h1, .h1 { font-size: 40px; }
  h2, .h2 { font-size: 32px; }
  h3, .h3 { font-size: 28px; }
  h4, .h4 { font-size: 22px; }
  h5, .h5 { font-size: 18px; }
  h6, .h6 { font-size: 16px; }

  /* Body & Utility Text */
  .body-large { font-size: 18px; }
  p, .body-regular { font-size: 15px; }
  .body-small { font-size: 13px; }
  .caption { font-size: 12px; }
  .button-text { font-size: 15px; }
}


/*
  --- Media Query for Mobile (max-width: 767px) ---
  Overrides for Mobile sizes.
*/
@media (max-width: 767px) {
  /* Headings */
  h1, .h1 { font-size: 32px; }
  h2, .h2 { font-size: 28px; }
  h3, .h3 { font-size: 24px; }
  h4, .h4 { font-size: 20px; }
  h5, .h5 { font-size: 16px; }
  h6, .h6 { font-size: 14px; }

  /* Body & Utility Text */
  .body-large { font-size: 16px; }
  p, .body-regular { font-size: 14px; }
  .body-small { font-size: 12px; }
  .caption { font-size: 11px; }
  .button-text { font-size: 14px; }
}