/**
 * Flyfar Tours - Typography System
 * Standardized font sizes, families, and weights
 */

/* ==========================================================================
   Font Family Definitions
   ========================================================================== */

.font-heading {
  font-family: 'Lora', serif;
}

.font-body {
  font-family: 'Barlow', sans-serif;
}

/* ==========================================================================
   Heading Styles - Consistent across entire site
   ========================================================================== */

/* H1 - Hero/Page Titles */
.heading-hero,
h1 {
  font-family: 'Lora', serif;
  font-weight: 700;
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .heading-hero,
  h1 {
    font-size: 3rem; /* 48px */
  }
}

@media (max-width: 1023px) {
  .heading-hero,
  h1 {
    font-size: 1.875rem; /* 30px */
  }
}

/* H2 - Section Titles */
.heading-section,
h2 {
  font-family: 'Lora', serif;
  font-weight: 700;
  line-height: 1.3;
}

@media (min-width: 1024px) {
  .heading-section,
  h2 {
    font-size: 2.25rem; /* 36px */
  }
}

@media (max-width: 1023px) {
  .heading-section,
  h2 {
    font-size: 1.5rem; /* 24px */
  }
}

/* H3 - Card/Subsection Titles */
.heading-card,
h3 {
  font-family: 'Lora', serif;
  font-weight: 600;
  line-height: 1.4;
}

@media (min-width: 1024px) {
  .heading-card,
  h3 {
    font-size: 1.5rem; /* 24px */
  }
}

@media (max-width: 1023px) {
  .heading-card,
  h3 {
    font-size: 1.125rem; /* 18px */
  }
}

/* H4 - Small Headings */
.heading-small,
h4 {
  font-family: 'Lora', serif;
  font-weight: 600;
  line-height: 1.4;
}

@media (min-width: 1024px) {
  .heading-small,
  h4 {
    font-size: 1.25rem; /* 20px */
  }
}

@media (max-width: 1023px) {
  .heading-small,
  h4 {
    font-size: 1rem; /* 16px */
  }
}

/* H5 - Micro Headings */
.heading-micro,
h5 {
  font-family: 'Lora', serif;
  font-weight: 600;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .heading-micro,
  h5 {
    font-size: 1.125rem; /* 18px */
  }
}

@media (max-width: 1023px) {
  .heading-micro,
  h5 {
    font-size: 0.875rem; /* 14px */
  }
}

/* ==========================================================================
   Body Text Styles
   ========================================================================== */

/* Standard Body Text */
.body-text,
p {
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  line-height: 1.75;
}

@media (min-width: 1024px) {
  .body-text,
  p {
    font-size: 1.125rem; /* 18px */
  }
}

@media (max-width: 1023px) {
  .body-text,
  p {
    font-size: 0.875rem; /* 14px */
  }
}

/* Small Body Text */
.body-small {
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

@media (min-width: 1024px) {
  .body-small {
    font-size: 0.875rem; /* 14px */
  }
}

@media (max-width: 1023px) {
  .body-small {
    font-size: 0.75rem; /* 12px */
  }
}

/* Label Text */
.label-text {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.025em;
}

@media (min-width: 1024px) {
  .label-text {
    font-size: 0.875rem; /* 14px */
  }
}

@media (max-width: 1023px) {
  .label-text {
    font-size: 0.75rem; /* 12px */
  }
}

/* Caption Text */
.caption-text {
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  line-height: 1.4;
}

@media (min-width: 1024px) {
  .caption-text {
    font-size: 0.75rem; /* 12px */
  }
}

@media (max-width: 1023px) {
  .caption-text {
    font-size: 0.625rem; /* 10px */
  }
}

/* ==========================================================================
   Button & Interactive Text
   ========================================================================== */

.button-text {
  font-family: 'Lora', serif;
  font-weight: 600;
  letter-spacing: 0.025em;
}

@media (min-width: 1024px) {
  .button-text {
    font-size: 1rem; /* 16px */
  }
}

@media (max-width: 1023px) {
  .button-text {
    font-size: 0.875rem; /* 14px */
  }
}

/* Tab Navigation */
.tab-text {
  font-family: 'Lora', serif;
  font-weight: 500;
}

@media (min-width: 1024px) {
  .tab-text {
    font-size: 1rem; /* 16px */
  }
}

@media (max-width: 1023px) {
  .tab-text {
    font-size: 0.8125rem; /* 13px */
  }
}

/* ==========================================================================
   Price Display
   ========================================================================== */

.price-large {
  font-family: 'Lora', serif;
  font-weight: 700;
  line-height: 1;
}

@media (min-width: 1024px) {
  .price-large {
    font-size: 2rem; /* 32px */
  }
}

@media (max-width: 1023px) {
  .price-large {
    font-size: 1.25rem; /* 20px */
  }
}

.price-medium {
  font-family: 'Lora', serif;
  font-weight: 700;
  line-height: 1;
}

@media (min-width: 1024px) {
  .price-medium {
    font-size: 1.5rem; /* 24px */
  }
}

@media (max-width: 1023px) {
  .price-medium {
    font-size: 1rem; /* 16px */
  }
}

.price-label {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (min-width: 1024px) {
  .price-label {
    font-size: 0.875rem; /* 14px */
  }
}

@media (max-width: 1023px) {
  .price-label {
    font-size: 0.75rem; /* 12px */
  }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.font-weight-regular {
  font-weight: 400;
}

.font-weight-medium {
  font-weight: 500;
}

.font-weight-semibold {
  font-weight: 600;
}

.font-weight-bold {
  font-weight: 700;
}

/* ==========================================================================
   Legacy Support - Gradual Migration
   ========================================================================== */

/* Keep existing font-lora and font-barlow classes working */
.font-lora {
  font-family: 'Lora', serif !important;
}

.font-barlow {
  font-family: 'Barlow', sans-serif !important;
}