/* ===================================
   LET'S MOVE - TYPOGRAPHY
   Headings, Text Styles, Labels
   =================================== */

/* ===== HEADINGS ===== */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-white);
  margin-bottom: var(--spacing-lg);
}

h1,
.h1 {
  font-size: var(--font-size-hero);
  letter-spacing: -1px;
}

h2,
.h2 {
  font-size: var(--font-size-5xl);
}

h3,
.h3 {
  font-size: var(--font-size-4xl);
}

h4,
.h4 {
  font-size: var(--font-size-3xl);
}

h5,
.h5 {
  font-size: var(--font-size-2xl);
}

h6,
.h6 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

/* ===== HEADING WITH GRADIENT ===== */
.heading-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== HEADING WITH ACCENT ===== */
.heading-accent {
  color: var(--color-primary);
}

/* ===== PARAGRAPH STYLES ===== */
p {
  margin-bottom: var(--spacing-lg);
  color: var(--color-text-gray);
}

p:last-child {
  margin-bottom: 0;
}

.text-large {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

.text-small {
  font-size: var(--font-size-sm);
}

.text-xs {
  font-size: var(--font-size-xs);
}

/* ===== TEXT COLORS ===== */
.text-white {
  color: var(--color-text-white);
}
.text-gray {
  color: var(--color-text-gray);
}
.text-primary {
  color: var(--color-primary);
}
.text-dark {
  color: var(--color-text-dark);
}
.text-muted {
  color: var(--color-text-muted);
}

/* ===== TEXT WEIGHTS ===== */
.font-regular {
  font-weight: var(--font-weight-regular);
}
.font-medium {
  font-weight: var(--font-weight-medium);
}
.font-semibold {
  font-weight: var(--font-weight-semibold);
}
.font-bold {
  font-weight: var(--font-weight-bold);
}

/* ===== LABELS & BADGES ===== */
.label {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius-sm);
  background-color: rgba(249, 166, 26, 0.1);
  color: var(--color-primary);
}

.label--primary {
  background-color: var(--color-primary);
  color: var(--color-bg-dark);
}

.label--outline {
  background-color: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

/* ===== SECTION TITLE COMPONENT ===== */
.section-title {
  text-align: center;
  margin-bottom: var(--spacing-4xl);
}

.section-title__label {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-xl);
  background: rgba(249, 166, 26, 0.15);
  border-radius: var(--border-radius-xl);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
}

.section-title__heading {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--spacing-md);
}

.section-title__description {
  font-size: var(--font-size-lg);
  color: var(--color-text-gray);
  max-width: 600px;
  margin: 0 auto;
}

/* ===== HIGHLIGHTED TEXT ===== */
.highlight {
  color: var(--color-primary);
}

.highlight-box {
  display: inline;
  padding: 2px 8px;
  background-color: var(--color-primary);
  color: var(--color-bg-dark);
  border-radius: var(--border-radius-sm);
}

/* ===== LINK STYLES ===== */
.link {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
}

.link:hover {
  opacity: 0.8;
}

.link-underline {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.link-arrow::after {
  content: "→";
  transition: transform var(--transition-fast);
}

.link-arrow:hover::after {
  transform: translateX(4px);
}

/* ===== RESPONSIVE TYPOGRAPHY ===== */
@media (max-width: 1024px) {
  h1,
  .h1 {
    font-size: var(--font-size-5xl);
  }

  h2,
  .h2 {
    font-size: var(--font-size-4xl);
  }

  h3,
  .h3 {
    font-size: var(--font-size-3xl);
  }

  .section-title__heading {
    font-size: var(--font-size-3xl);
  }
}

@media (max-width: 768px) {
  h1,
  .h1 {
    font-size: var(--font-size-4xl);
  }

  h2,
  .h2 {
    font-size: var(--font-size-3xl);
  }

  h3,
  .h3 {
    font-size: var(--font-size-2xl);
  }

  h4,
  .h4 {
    font-size: var(--font-size-xl);
  }

  .section-title__heading {
    font-size: var(--font-size-2xl);
  }

  .section-title__description {
    font-size: var(--font-size-base);
  }
}