/* ============================================================
   SMPL Demo Site — Typography
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--line-height-tight);
  font-weight: 700;
  color: var(--color-text);
}

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

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

.text-sm    { font-size: var(--font-size-sm); }
.text-lg    { font-size: var(--font-size-lg); }
.text-xl    { font-size: var(--font-size-xl); }
.text-2xl   { font-size: var(--font-size-2xl); }
.text-3xl   { font-size: var(--font-size-3xl); }
.text-4xl   { font-size: var(--font-size-4xl); }
.text-5xl   { font-size: var(--font-size-5xl); }

.text-light   { color: var(--color-text-light); }
.text-white   { color: #ffffff; }
.text-primary { color: var(--color-primary); }
.text-center  { text-align: center; }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-bold   { font-weight: 700; }

.section-label {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.section-title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
  max-width: 600px;
  margin-bottom: var(--space-8);
}