/* =============================================================================
   RESPONSIVE TYPOGRAPHY SYSTEM - INERCIA THEME
   Mobile-first typography scaling based on Figma design specifications
   ============================================================================= */

/* Base Typography Reset for Consistency */
* {
  box-sizing: border-box;
}

html {
  font-size: 16px; /* Base font size for rem calculations */
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--body-size-mobile, 14px);
  line-height: var(--body-line-height-mobile, 1.5);
  font-weight: 400;
  color: var(--color-neutral-0, #000000);
  margin: 0;
  padding: 0;
}

/* =============================================================================
   MOBILE-FIRST RESPONSIVE HEADINGS
   ============================================================================= */

/* H1 - Main Headlines */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--h1-size-mobile, 32px);
  font-weight: var(--h1-weight-mobile, 600);
  line-height: var(--h1-line-height-mobile, 1.2);
  color: var(--color-primary-600, #093855);
  margin: 0 0 var(--spacing-md-mobile, 16px) 0;
  letter-spacing: -0.02em;
}

/* H2 - Section Headlines */
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--h2-size-mobile, 24px);
  font-weight: var(--h2-weight-mobile, 600);
  line-height: var(--h2-line-height-mobile, 1.25);
  color: var(--color-primary-600, #093855);
  margin: 0 0 var(--spacing-sm-mobile, 12px) 0;
  letter-spacing: -0.01em;
}

/* H3 - Subsection Headlines */
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--h3-size-mobile, 20px);
  font-weight: var(--h3-weight-mobile, 600);
  line-height: var(--h3-line-height-mobile, 1.3);
  color: var(--color-primary-500, #174f71);
  margin: 0 0 var(--spacing-sm-mobile, 12px) 0;
}

/* H4-H6 - Additional Heading Levels */
h4, .h4 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-primary-500, #174f71);
  margin: 0 0 var(--spacing-xs-mobile, 8px) 0;
}

h5, .h5,
h6, .h6 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-primary-500, #174f71);
  margin: 0 0 var(--spacing-xs-mobile, 8px) 0;
}

/* Body Text */
p, .body-text {
  font-family: var(--font-body);
  font-size: var(--body-size-mobile, 14px);
  font-weight: 400;
  line-height: var(--body-line-height-mobile, 1.5);
  color: var(--color-neutral-0, #000000);
  margin: 0 0 var(--spacing-md-mobile, 16px) 0;
}

/* Small Text */
small, .small-text {
  font-family: var(--font-body);
  font-size: var(--small-size-mobile, 12px);
  font-weight: 400;
  line-height: var(--small-line-height-mobile, 1.4);
  color: var(--color-neutral-0, #000000);
}

/* Lead Text - Larger introductory paragraphs */
.lead {
  font-size: calc(var(--body-size-mobile, 14px) * 1.15);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: var(--spacing-lg-mobile, 24px);
  color: var(--color-primary-500, #174f71);
}

/* =============================================================================
   TABLET RESPONSIVE TYPOGRAPHY (768px+)
   ============================================================================= */

@media (min-width: 768px) {
  body {
    font-size: var(--body-size-tablet, 16px);
    line-height: var(--body-line-height-tablet, 1.5);
  }

  h1, .h1 {
    font-size: var(--h1-size-tablet, 40px);
    font-weight: var(--h1-weight-tablet, 600);
    line-height: var(--h1-line-height-tablet, 1.235);
    margin-bottom: var(--spacing-lg-tablet, 32px);
  }

  h2, .h2 {
    font-size: var(--h2-size-tablet, 28px);
    font-weight: var(--h2-weight-tablet, 600);
    line-height: var(--h2-line-height-tablet, 1.2);
    margin-bottom: var(--spacing-md-tablet, 24px);
  }

  h3, .h3 {
    font-size: var(--h3-size-tablet, 22px);
    font-weight: var(--h3-weight-tablet, 600);
    line-height: var(--h3-line-height-tablet, 1.334);
    margin-bottom: var(--spacing-sm-tablet, 16px);
  }

  h4, .h4 {
    font-size: 20px;
    margin-bottom: var(--spacing-sm-tablet, 16px);
  }

  h5, .h5,
  h6, .h6 {
    font-size: 18px;
    margin-bottom: var(--spacing-sm-tablet, 16px);
  }

  p, .body-text {
    font-size: var(--body-size-tablet, 16px);
    line-height: var(--body-line-height-tablet, 1.5);
    margin-bottom: var(--spacing-md-tablet, 24px);
  }

  small, .small-text {
    font-size: var(--small-size-tablet, 13px);
    line-height: var(--small-line-height-tablet, 1.4);
  }

  .lead {
    font-size: calc(var(--body-size-tablet, 16px) * 1.25);
    margin-bottom: var(--spacing-xl-tablet, 48px);
  }
}

/* =============================================================================
   DESKTOP RESPONSIVE TYPOGRAPHY (1024px+)
   ============================================================================= */

@media (min-width: 1024px) {
  body {
    font-size: var(--body-size-desktop, 18px);
    line-height: var(--body-line-height-desktop, 1.5);
  }

  h1, .h1 {
    font-size: var(--h1-size-desktop, 48px);
    font-weight: var(--h1-weight-desktop, 600);
    line-height: var(--h1-line-height-desktop, 1.235);
    margin-bottom: var(--spacing-xl-desktop, 64px);
  }

  h2, .h2 {
    font-size: var(--h2-size-desktop, 34px);
    font-weight: var(--h2-weight-desktop, 600);
    line-height: var(--h2-line-height-desktop, 1);
    margin-bottom: var(--spacing-lg-desktop, 48px);
  }

  h3, .h3 {
    font-size: var(--h3-size-desktop, 24px);
    font-weight: var(--h3-weight-desktop, 400);
    line-height: var(--h3-line-height-desktop, 1.334);
    margin-bottom: var(--spacing-md-desktop, 32px);
  }

  h4, .h4 {
    font-size: 22px;
    margin-bottom: var(--spacing-md-desktop, 32px);
  }

  h5, .h5,
  h6, .h6 {
    font-size: 20px;
    margin-bottom: var(--spacing-sm-desktop, 20px);
  }

  p, .body-text {
    font-size: var(--body-size-desktop, 18px);
    line-height: var(--body-line-height-desktop, 1.5);
    margin-bottom: var(--spacing-lg-desktop, 48px);
  }

  small, .small-text {
    font-size: var(--small-size-desktop, 14px);
    line-height: var(--small-line-height-desktop, 1.4);
  }

  .lead {
    font-size: calc(var(--body-size-desktop, 18px) * 1.3);
    margin-bottom: var(--spacing-2xl-desktop, 96px);
  }
}

/* =============================================================================
   TYPOGRAPHY UTILITY CLASSES
   ============================================================================= */

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

@media (max-width: 767px) {
  .mobile-text-center { text-align: center !important; }
  .mobile-text-left { text-align: left !important; }
}

/* Font Weight Utilities */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Color Utilities */
.text-primary { color: var(--color-primary-600, #093855); }
.text-accent { color: var(--color-accent-400, #eb6929); }
.text-neutral { color: var(--color-neutral-0, #000000); }
.text-white { color: var(--color-neutral-950, #ffffff); }

/* Line Height Utilities */
.leading-tight { line-height: 1.2; }
.leading-normal { line-height: 1.5; }
.leading-loose { line-height: 1.8; }

/* Letter Spacing */
.tracking-tight { letter-spacing: -0.02em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.05em; }

/* Text Transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

/* Typography for Special Elements */
.blockquote {
  font-family: var(--font-display);
  font-size: calc(var(--body-size-mobile, 14px) * 1.25);
  font-style: italic;
  color: var(--color-primary-500, #174f71);
  border-left: 4px solid var(--color-accent-400, #eb6929);
  padding-left: var(--spacing-lg-mobile, 24px);
  margin: var(--spacing-xl-mobile, 32px) 0;
}

@media (min-width: 768px) {
  .blockquote {
    font-size: calc(var(--body-size-tablet, 16px) * 1.25);
    padding-left: var(--spacing-xl-tablet, 48px);
    margin: var(--spacing-2xl-tablet, 64px) 0;
  }
}

@media (min-width: 1024px) {
  .blockquote {
    font-size: calc(var(--body-size-desktop, 18px) * 1.25);
    padding-left: var(--spacing-xl-desktop, 64px);
    margin: var(--spacing-2xl-desktop, 96px) 0;
  }
}

/* Button Typography */
.btn-text {
  font-family: var(--font-roboto);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

@media (min-width: 768px) {
  .btn-text {
    font-size: 15px;
  }
}

@media (min-width: 1024px) {
  .btn-text {
    font-size: 16px;
  }
}

/* List Styling */
ul, ol {
  font-family: var(--font-body);
  font-size: var(--body-size-mobile, 14px);
  line-height: var(--body-line-height-mobile, 1.5);
  margin: 0 0 var(--spacing-md-mobile, 16px) 0;
  padding-left: var(--spacing-lg-mobile, 24px);
}

@media (min-width: 768px) {
  ul, ol {
    font-size: var(--body-size-tablet, 16px);
    line-height: var(--body-line-height-tablet, 1.5);
    margin-bottom: var(--spacing-md-tablet, 24px);
    padding-left: var(--spacing-lg-tablet, 32px);
  }
}

@media (min-width: 1024px) {
  ul, ol {
    font-size: var(--body-size-desktop, 18px);
    line-height: var(--body-line-height-desktop, 1.5);
    margin-bottom: var(--spacing-lg-desktop, 48px);
    padding-left: var(--spacing-lg-desktop, 48px);
  }
}

li {
  margin-bottom: var(--spacing-xs-mobile, 8px);
}

@media (min-width: 768px) {
  li {
    margin-bottom: var(--spacing-sm-tablet, 16px);
  }
}

@media (min-width: 1024px) {
  li {
    margin-bottom: var(--spacing-sm-desktop, 20px);
  }
}