/* ================================
   TYPOGRAPHY STYLES
   Extracted from Zeitgeist Cloud
   Uses tokens from base CSS files
   
   Typography is scoped to .text-content-panel
   Automatically styles HTML elements inside panels
   ================================ */

/* Headings inside text content panels */
.text-content-panel h1 {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: var(--space-sm);
}

.text-content-panel h2 {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.2;
  margin-top: var(--space-md);
  margin-bottom: var(--space-xxs);
}

/* Body text and lists */
.text-content-panel p,
.text-content-panel li {
  font-size: var(--text-base);
  line-height: 1.6;
}

/* Unordered lists */
.text-content-panel ul {
  list-style: disc;
  padding-left: var(--space-lg);
}

/* ================================
   TYPOGRAPHY UTILITIES
   Optional helper classes for special text treatments
   ================================ */

/* Lead paragraph - slightly larger intro text */
.lead-text {
  font-size: var(--text-lg);
  line-height: var(--hero-line-height);
  margin-bottom: var(--space-md);
}

/* Subtle intro summary - slightly dimmed */
.intro-summary {
  opacity: 0.9;
  margin-bottom: var(--space-sm);
}

/* Callout box - highlighted note or warning */
.callout-box {
  background: #F5F5F5;
  padding: var(--space-sm);
  border-radius: var(--radius);
  margin: var(--space-sm) 0 var(--space-md);
}