/* ============================================
   YALLA MOBILE - TYPOGRAPHY
   ============================================ */

/* Heading Styles */
.heading-1 {
  font-size: var(--text-5xl, clamp(2.25rem, 1.8rem + 2.5vw, 3.5rem));
  font-weight: var(--font-extrabold, 800);
  letter-spacing: var(--tracking-tight, -0.02em);
  line-height: var(--leading-tight, 1.2);
}

.heading-2 {
  font-size: var(--text-4xl, clamp(1.875rem, 1.6rem + 1.5vw, 2.5rem));
  font-weight: var(--font-bold, 700);
  letter-spacing: var(--tracking-tight, -0.02em);
  line-height: var(--leading-tight, 1.2);
}

.heading-3 {
  font-size: var(--text-3xl, clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem));
  font-weight: var(--font-bold, 700);
  line-height: var(--leading-snug, 1.35);
}

.heading-4 {
  font-size: var(--text-2xl, clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem));
  font-weight: var(--font-semibold, 600);
  line-height: var(--leading-snug, 1.35);
}

.heading-5 {
  font-size: var(--text-xl, clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem));
  font-weight: var(--font-semibold, 600);
  line-height: var(--leading-normal, 1.5);
}

.heading-6 {
  font-size: var(--text-lg, clamp(1rem, 0.95rem + 0.3vw, 1.125rem));
  font-weight: var(--font-medium, 500);
  line-height: var(--leading-normal, 1.5);
}

/* Body Text */
.text-body {
  font-size: var(--text-base, 1rem);
  line-height: var(--leading-relaxed, 1.65);
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
}

.text-body-lg {
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--leading-relaxed, 1.65);
}

.text-body-sm {
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--leading-relaxed, 1.65);
}

/* Small Text */
.text-small {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-tertiary, rgba(255, 255, 255, 0.4));
}

.text-caption {
  font-size: var(--text-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider, 0.05em);
  color: var(--color-text-tertiary, rgba(255, 255, 255, 0.4));
}

/* Labels */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  background: var(--color-primary-subtle, rgba(99, 102, 241, 0.1));
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-semibold, 600);
  color: var(--color-primary, #6366f1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide, 0.025em);
}

.section-label::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--color-primary, #6366f1);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}

/* Gradient Text */
.gradient-text {
  background: var(--gradient-primary, linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Text Colors */
.text-primary { color: var(--color-text-primary, #ffffff); }
.text-secondary { color: var(--color-text-secondary, rgba(255, 255, 255, 0.7)); }
.text-tertiary { color: var(--color-text-tertiary, rgba(255, 255, 255, 0.4)); }
.text-accent { color: var(--color-primary, #6366f1); }
.text-success { color: var(--color-success, #22c55e); }
.text-warning { color: var(--color-warning, #f59e0b); }
.text-error { color: var(--color-error, #ef4444); }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

[dir="rtl"] .text-left { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }

/* Text Transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

/* Text Wrap */
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
.text-nowrap { white-space: nowrap; }

/* Text Truncate */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Font Weights */
.font-normal { font-weight: var(--font-normal, 400); }
.font-medium { font-weight: var(--font-medium, 500); }
.font-semibold { font-weight: var(--font-semibold, 600); }
.font-bold { font-weight: var(--font-bold, 700); }

/* Links */
.link {
  color: var(--color-primary, #6366f1);
  text-decoration: none;
  transition: color var(--transition-fast, 0.15s ease);
}

.link:hover {
  color: var(--color-primary-light, #818cf8);
  text-decoration: underline;
}