/**
 * Typography System
 * Based on FERNI-BRAND-GUIDELINES.md Section 4
 */

/* ============================================
   DISPLAY HEADLINES (Heroes, Major Headlines)
   ============================================ */

.display-xl {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}

.display-lg {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}

.display-md {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.display-sm {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

/* ============================================
   SECTION HEADLINES
   ============================================ */

.headline-xl {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, var(--text-5xl));
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.headline-lg {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, var(--text-4xl));
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}

.headline-md {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, var(--text-3xl));
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.headline-sm {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  color: var(--color-text-primary);
}

/* ============================================
   BODY TEXT
   ============================================ */

.body-xl {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.body-lg {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.body-md {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* ============================================
   UI ELEMENTS
   ============================================ */

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  color: var(--color-text-muted);
}

/* ============================================
   TEXT EFFECTS
   ============================================ */

/* Gradient text for accents */
.text-gradient {
  background: linear-gradient(
    135deg,
    var(--color-ferni) 0%,
    var(--color-ferni-secondary) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Text with readable shadow on video backgrounds */
.text-shadow {
  text-shadow: 
    0 1px 8px rgba(250, 248, 245, 0.9),
    0 2px 16px rgba(250, 248, 245, 0.7);
}

/* Accent colored text */
.text-accent {
  color: var(--color-accent);
}

/* Muted text */
.text-muted {
  color: var(--color-text-muted);
}