/* QualiVeil v8 Typography System
   Standardizes font sizes, line heights, and spacing across the site
   Updated: Unified hero and section typography tokens
*/

:root {
  /* Unified Heading Scale (hero + section share same tokens) */
  --text-heading-size: clamp(1.375rem, 1vw + 0.95rem, 1.75rem);
  --text-heading-size-v2: clamp(1.5rem, 1.2vw + 1.05rem, 2rem);
  --text-heading-weight: 600;
  --text-heading-line-height: 1.15;
  --text-heading-tracking: -0.02em;
  
  /* Unified Lead/Subheader Scale (hero lead + section lead share same tokens) */
  --text-lead-size: clamp(1rem, 0.8vw + 0.8rem, 1.25rem);
  --text-lead-line-height: 1.5;
  --text-lead-tracking: -0.01em;
  
  /* Body Text Scale */
  --text-body-large: clamp(1.0rem, 1.2vw + 0.7rem, 1.1rem);
  --text-body: 1.05rem;
  --text-body-small: 0.95rem;
  
  /* Line Heights */
  --leading-body: 1.75;
  --leading-tight: 1.5;
  
  /* Letter Spacing */
  --tracking-normal: -0.01em;
  --tracking-tight: -0.02em;
}

/* ================================
   Unified Hero + Section Headlines
   Both .linear-text-large and .text-section-heading now share same tokens
   ================================ */

/* Hero headline (V1) - now uses unified heading tokens */
.linear-text-large {
  font-size: var(--text-heading-size);
  font-weight: var(--text-heading-weight);
  line-height: var(--text-heading-line-height);
  letter-spacing: var(--text-heading-tracking);
}

/* Hero headline (V2/V3) - now uses unified heading tokens */
.linear-text-large-v2 {
  font-size: var(--text-heading-size-v2);
  font-weight: var(--text-heading-weight);
  line-height: var(--text-heading-line-height);
  letter-spacing: var(--text-heading-tracking);
}

/* ================================
   Unified Hero + Section Lead Text
   Both .text-hero-lead and .text-section-lead now share same tokens
   ================================ */

/* Hero Lead Text - uses unified lead tokens */
.text-hero-lead {
  font-size: var(--text-lead-size);
  line-height: var(--text-lead-line-height);
  letter-spacing: var(--text-lead-tracking);
}

/* Section Subheadlines (legacy compat) */
.text-section-subheadline {
  font-size: var(--text-lead-size);
  line-height: var(--text-lead-line-height);
  letter-spacing: var(--text-lead-tracking);
}

/* ================================
   Section Typography System
   - Now uses same unified tokens as hero
   ================================ */

/* Section headings (H2) – uses unified heading tokens (same as hero) */
.text-section-heading {
  font-size: var(--text-heading-size);
  font-weight: var(--text-heading-weight);
  line-height: var(--text-heading-line-height);
  letter-spacing: var(--text-heading-tracking);

  /* Keep long headlines from stretching super wide */
  max-width: 56rem; /* ~896px */
  margin-left: auto;
  margin-right: auto;
}

/* Slightly more breathing room on small screens */
@media (max-width: 640px) {
  .text-section-heading {
    line-height: 1.3;
  }
}

/* V2-specific section headings - uses unified V2 tokens (same as hero V2) */
.text-section-heading-v2 {
  font-size: var(--text-heading-size-v2);
  font-weight: var(--text-heading-weight);
  line-height: var(--text-heading-line-height);
  letter-spacing: var(--text-heading-tracking);
  
  /* Keep long headlines from stretching super wide */
  max-width: 56rem; /* ~896px */
  margin-left: auto;
  margin-right: auto;
}

/* Slightly more breathing room on small screens */
@media (max-width: 640px) {
  .text-section-heading-v2 {
    line-height: 1.3;
  }
}

/* Elevated Eyebrow Headers (V2 only - blue uppercase labels above sections) */
.text-eyebrow {
  font-size: clamp(0.85rem, 0.6vw + 0.65rem, 1rem);  /* ~14–16px */
  font-weight: 700;                                  /* bump weight */
  letter-spacing: 0.15em;                            /* slightly tightened */
  text-transform: uppercase;
  color: #38bdf8;                                     /* sky-300 */
  opacity: 1;                                         /* full strength */
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.35);      /* subtle glow for elevation */
  margin-bottom: 0.35rem;                             /* reduce gap to H2 */
}

/* Hero eyebrow gets a bit more breathing room than regular eyebrows */
.hero-eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem; /* more space than default eyebrow */
}

/* Slightly elevated CTA heading for the bottom band (V2 only) */
.cta-heading {
  font-size: clamp(1.5rem, 1.1vw + 1.05rem, 1.9rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

/* Section lead / subheader text under H2s - uses unified lead tokens (same as hero lead) */
.text-section-lead {
  font-size: var(--text-lead-size);
  line-height: var(--text-lead-line-height);
  letter-spacing: var(--text-lead-tracking);
  color: #cbd5e1; /* slate-300 */
}

/* ================================
   Unified Eyebrow Token
   Reusable across hero and all sections
   ================================ */
.text-section-eyebrow {
  font-size: clamp(0.85rem, 0.6vw + 0.65rem, 1rem);  /* ~14–16px */
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #38bdf8;                                     /* sky-300 */
  opacity: 1;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.35);      /* subtle glow */
  margin-bottom: 0.35rem;
}

/* Body Text - Large (for important sections) */
.text-body-large {
  font-size: var(--text-body-large);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
}

/* Standard Body Text */
.text-body-standard {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
}

/* Small Body Text */
.text-body-small {
  font-size: var(--text-body-small);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-normal);
}

/* Color Palette Consistency */
.text-primary-light { color: #e4e8ef; }
.text-secondary-light { color: #d1d5db; }
.text-muted { color: #9ca3af; }
.text-subtle { color: #6b7280; }

/* ---- Bulletproof section divider ---- */
/* Default: centered, within content width */
.qv-divider {
  border: 0;
  height: 1px;
  margin: 80px 0;
  background: linear-gradient(
    90deg,
    rgba(12,23,46,0) 0%,
    rgba(12,23,46,.75) 35%,
    rgba(12,23,46,.75) 65%,
    rgba(12,23,46,0) 100%
  );
  opacity: .95;
  display: block;
  position: relative;
  z-index: 2;               /* sits above section bg/overlays */
  pointer-events: none;
}

/* Full-bleed version: stretches edge-to-edge, even inside a container */
.qv-divider--bleed {
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

/* If your section uses overflow hidden (to clip glows), give the divider its own layer */
.qv-section {
  position: relative;       /* ensure the divider's z-index has context */
  padding-top: 40px;        /* prevents margin collapse with first child */
  padding-bottom: 40px;     /* prevents margin collapse with last child */
}

/* Ultra-subtle variant if you want it quieter */
.qv-divider--subtle {
  opacity: .6;
  background: linear-gradient(
    90deg,
    rgba(12,23,46,0) 0%,
    rgba(12,23,46,.55) 40%,
    rgba(12,23,46,.55) 60%,
    rgba(12,23,46,0) 100%
  );
}

/* ================================
   Section layout helpers
   ================================ */

/* Base spacing + subtle top divider for all content sections */
.section-block {
  padding-top: 5.5rem;  /* ~py-22 */
  padding-bottom: 5.5rem;
  border-top: 1px solid rgba(15, 23, 42, 0.7); /* subtle slate line */
}

/* For the first section after hero where you don't want a divider yet */
.section-block--no-divider {
  border-top: none;
}