/* ============================================
   MEB CREATIV — Typography System
   ============================================ */

/* ── Type Utilities ─────────────────────────── */

.label-caps {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.label-caps--electric {
  color: var(--color-electric-light);
}

.label-caps--citrine {
  color: var(--color-citrine);
}

.label-caps--muted {
  color: var(--color-slate-400);
}

/* Display / Hero Headlines */
.heading-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.heading-display {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.heading-section {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.heading-card {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

/* Body text */
.body-large {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--color-slate-600);
}

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

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

/* Color utilities for text */
.text-white      { color: var(--color-white); }
.text-muted-dark { color: var(--color-slate-400); }
.text-muted-light { color: var(--color-slate-500); }
.text-electric   { color: var(--color-electric); }
.text-citrine    { color: var(--color-citrine); }
.text-dark       { color: var(--color-midnight); }

/* Gradient text */
.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

/* Mono */
.mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Blockquote */
blockquote {
  border-left: 3px solid var(--color-electric);
  padding-left: var(--space-6);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-slate-600);
  line-height: var(--leading-loose);
}

/* Prose (long-form text blocks) */
.prose p + p {
  margin-top: var(--space-4);
}

.prose ul {
  list-style: disc;
  padding-left: var(--space-6);
}

.prose ul li {
  margin-bottom: var(--space-2);
  line-height: var(--leading-normal);
}

.prose--dark p,
.prose--dark ul li {
  color: var(--color-slate-400);
}

.prose--dark blockquote {
  color: var(--color-slate-400);
}