/* ==========================================================================
   ELLWEN PAINTS — Typography System
   ========================================================================== */

/* ── Heading Styles ──────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-dark-charcoal);
  letter-spacing: var(--tracking-tight);
}

h1 {
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
}

h2 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
}

h3 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
}

h4 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
}

h5 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

h6 {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
}

/* Display heading (hero) */
.display-heading {
  font-family: var(--font-display);
  font-size: var(--text-7xl);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-dark-charcoal);
}

.display-heading--light {
  color: var(--color-white);
}

/* ── Section Headings ────────────────────────────────────────────────────── */

.section-label {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.section-title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-dark-charcoal);
  margin-bottom: var(--space-6);
}

.section-title--light {
  color: var(--color-white);
}

.section-subtitle {
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-medium-grey);
  max-width: 640px;
}

.section-subtitle--centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ── Body Text ───────────────────────────────────────────────────────────── */

.text-body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-dark-grey);
}

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

.text-body--small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* Lead paragraph */
.text-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-dark-grey);
  font-weight: var(--weight-regular);
}

/* ── Captions & Labels ───────────────────────────────────────────────────── */

.text-caption {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-medium-grey);
}

.text-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-dark-charcoal);
}

.text-meta {
  font-size: var(--text-sm);
  color: var(--color-medium-grey);
}

/* ── Links ───────────────────────────────────────────────────────────────── */

.text-link {
  color: var(--color-primary);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.text-link:hover {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary);
}

.text-link--accent {
  color: var(--color-primary);
}

.text-link--accent:hover {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary);
}

/* ── Inline Emphasis ─────────────────────────────────────────────────────── */

strong, .text-bold {
  font-weight: var(--weight-semibold);
}

.text-highlight {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.text-accent {
  color: var(--color-primary);
}

/* ── Blockquote ──────────────────────────────────────────────────────────── */

blockquote {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  line-height: var(--leading-relaxed);
  color: var(--color-dark-grey);
  padding-left: var(--space-8);
  border-left: 3px solid var(--color-primary);
}

/* ── Responsive Typography ───────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .display-heading {
    font-size: var(--text-6xl);
  }

  h1, .section-title {
    font-size: var(--text-4xl);
  }

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

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

@media (max-width: 768px) {
  .display-heading {
    font-size: var(--text-5xl);
  }

  h1, .section-title {
    font-size: var(--text-3xl);
  }

  h2 {
    font-size: var(--text-2xl);
  }

  h3 {
    font-size: var(--text-xl);
  }

  h4 {
    font-size: var(--text-lg);
  }

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

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

@media (max-width: 480px) {
  .display-heading {
    font-size: var(--text-4xl);
  }

  h1, .section-title {
    font-size: var(--text-2xl);
  }

  h2 {
    font-size: var(--text-xl);
  }
}