/* ============================================================================
   TEXT CLASS STRUCTURE — ECHOBRAND TYPOGRAPHY SYSTEM
   ============================================================================

   ⚙️ Regular Text Classes:
   - Purpose: Control font size, weight, spacing, alignment, and max-width.
   - Naming: `.text-block-[sm|md|lg]`, `.heading-[xs|sm|md|lg|xl]`, etc.
   - Color: Inherits default color unless combined with a color class.

   🎨 Color-Specialty Text Classes:
   - Purpose: Combine regular text styling *with* a branded color.
   - Naming: `.text-[color]-[sm|md|lg]`  → e.g., `.text-lavender-md`
   - Color is locked in via `color: #HEX;`
   - Useful for spiritually-themed zones, CTA highlights, or aesthetic accents.

   🔁 Strategy:
   - Keep structural text styling separate from color when possible.
   - Use combined classes (like `.text-lavender-lg`) only when needed for impact zones.
   - If multiple color variants share the same size/weight/layout — consider extracting common base styles.

============================================================================ */


.heading-xl {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  line-height: 1.2;
  color: #FFC94A !important;
}

.text-xs {
  font-size: 0.75rem !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 1.4;
  color: #555555 !important;
}

.text-sm {
  font-size: 0.875rem !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: #555555 !important;
}

.text-base {
  font-size: 1rem !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: #1A1A1A !important;
}

.text-md {
  font-size: 1.125rem !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: #1A1A1A !important;
}

.text-lg {
  font-size: 1.25rem !important;
  font-family: 'Montserrat',
}  

/* ------------------------------------------------------------
   🎨 COLOR-SPECIALTY TEXT CLASSES BELOW
   These classes combine font styling with a locked brand color.
   Use for styled statements, emotional emphasis, or thematic zones.
------------------------------------------------------------ */
.text-lavender-xl {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;        /* 24px */
  font-weight: 500;
  line-height: 1.6;
  color: #D8CFF7;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

  
.text-lavender-lg {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;            /* 20px */
  font-weight: 500;
  line-height: 1.6;
  color: #D8CFF7;
  max-width: 65ch;
}

.text-lavender-md {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.125rem;           /* 18px */
  font-weight: 500;
  line-height: 1.6;
  color: #D8CFF7;
  max-width: 65ch;
}

.text-lavender-sm {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;               /* 16px */
  font-weight: 500;
  line-height: 1.6;
  color: #D8CFF7;
  max-width: 65ch;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}