/* ========================================
   Typography
   KashiVedicConnect.com
   ======================================== */

/* ========================================
   Headings
   ======================================== */

.heading-1,
.heading-2,
.heading-3,
.heading-4,
.heading-5,
.heading-6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-charcoal);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.heading-1 {
  font-size: clamp(2.5rem, 5vw, var(--font-size-6xl));
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.heading-2 {
  font-size: clamp(2rem, 4vw, var(--font-size-5xl));
  line-height: var(--line-height-tight);
}

.heading-3 {
  font-size: clamp(1.75rem, 3vw, var(--font-size-4xl));
}

.heading-4 {
  font-size: clamp(1.5rem, 2.5vw, var(--font-size-3xl));
}

.heading-5 {
  font-size: clamp(1.25rem, 2vw, var(--font-size-2xl));
  letter-spacing: -0.01em;
}

.heading-6 {
  font-size: clamp(1.125rem, 1.5vw, var(--font-size-xl));
  letter-spacing: 0;
}

/* ========================================
   Body Text
   ======================================== */

.body-large {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1.25vw, var(--font-size-lg));
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  color: var(--color-charcoal);
}

.body-base {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-charcoal);
}

.body-small {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-charcoal-light);
}

/* ========================================
   Text Colors
   ======================================== */

.text-gold {
  color: var(--color-gold);
}

.text-saffron {
  color: var(--color-saffron);
}

.text-maroon {
  color: var(--color-maroon);
}

.text-muted {
  color: var(--color-charcoal-lighter);
}

/* ========================================
   Label
   ======================================== */

.label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  line-height: var(--line-height-normal);
}

/* ========================================
   Subtitle
   ======================================== */

.subtitle {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  color: var(--color-charcoal-lighter);
  font-size: clamp(1rem, 1.125vw, var(--font-size-md));
  line-height: var(--line-height-normal);
}

/* ========================================
   Display (Hero)
   ======================================== */

.display-1 {
  font-family: var(--font-heading);
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-semibold);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-charcoal);
  text-wrap: balance;
}

/* ========================================
   Section Title Pattern
   ======================================== */

.section-title {
  text-align: center;
  margin-bottom: var(--space-16);
}

.section-title .label {
  display: block;
  margin-bottom: var(--space-4);
}

.section-title .heading-2 {
  margin-bottom: var(--space-4);
}

.section-title .subtitle {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Left-aligned variant */
.section-title--left {
  text-align: left;
}

.section-title--left .subtitle {
  margin-left: 0;
  margin-right: 0;
}

/* ========================================
   Text Wrapping & Utilities
   ======================================== */

.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

.font-serif {
  font-family: var(--font-heading);
}

.font-sans {
  font-family: var(--font-body);
}

.italic {
  font-style: italic;
}

.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ========================================
   Links & Inline
   ======================================== */

.link {
  color: var(--color-gold);
  text-decoration: none;
  position: relative;
  transition: color var(--transition-fast);
}

.link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-gold);
  transition: width var(--transition-base);
}

.link:hover::after {
  width: 100%;
}

.link:hover {
  color: var(--color-gold-dark);
}

/* ========================================
   Lead Paragraph
   ======================================== */

.lead {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1.25vw, var(--font-size-lg));
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-relaxed);
  color: var(--color-charcoal-light);
  max-width: 680px;
}

.lead--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ========================================
   Blockquote
   ======================================== */

blockquote {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, var(--font-size-2xl));
  font-style: italic;
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-snug);
  color: var(--color-charcoal-light);
  padding-left: var(--space-8);
  border-left: 2px solid var(--color-gold);
}

/* ========================================
   Inline Code
   ======================================== */

code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  background-color: var(--color-ivory-dark);
  border-radius: var(--radius-sm);
  color: var(--color-maroon);
}