/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

h1 { font-size: var(--text-5xl); font-weight: 800; }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); font-weight: 600; }

p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

p + p { margin-top: var(--space-6); }

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

.text-xl {
  font-size: var(--text-xl);
  line-height: 1.6;
}

.text-sm {
  font-size: var(--text-sm);
  line-height: 1.6;
}

.text-xs {
  font-size: var(--text-xs);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Gradient text for hero headings */
.gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, var(--color-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text--warm {
  background: linear-gradient(135deg, #ffffff 0%, var(--color-coral) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Prose for article content */
.prose {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.prose p {
  font-size: var(--text-lg);
  line-height: 1.8;
  margin-bottom: var(--space-6);
}

.prose h2 {
  font-size: var(--text-3xl);
  margin-top: var(--space-16);
  margin-bottom: var(--space-6);
}

.prose h3 {
  font-size: var(--text-2xl);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.prose img {
  border-radius: var(--radius-lg);
  margin: var(--space-12) 0;
}

.prose blockquote {
  border-left: 3px solid var(--color-cyan);
  padding-left: var(--space-8);
  margin: var(--space-12) 0;
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-text-primary);
  line-height: 1.6;
}

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

.prose a {
  color: var(--color-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) ease;
}

.prose a:hover { color: var(--color-coral); }

/* Label / overline text */
.label {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-cyan);
}