/* ============================================
   ALVEAOS - HERO TYPOGRAPHY SYSTEM
   ============================================

   Modern tech SaaS aesthetic:
   - Bold, confident sans-serif headlines
   - Clean geometric shapes
   - No serifs, no italics

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

/* ============================================
   HERO TYPOGRAPHY VARIABLES
   Uses same fonts as core typography for consistency
   ============================================ */
:root {
  /* Unified Font Stack - Clash Display for display (matches Fontshare load) */
  --hero-font-display: 'Clash Display', -apple-system, BlinkMacSystemFont, sans-serif;
  --hero-font-headline: 'Clash Display', -apple-system, BlinkMacSystemFont, sans-serif;
  --hero-font-body: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hero-font-accent: 'Azeret Mono', 'JetBrains Mono', 'SF Mono', monospace;

  /* Hero Type Scale - Bold & Modern */
  --hero-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --hero-text-sm: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  --hero-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --hero-text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --hero-text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  --hero-text-2xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --hero-text-3xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem);
  --hero-text-4xl: clamp(2.75rem, 2rem + 3.75vw, 5rem);
  --hero-text-5xl: clamp(3.25rem, 2.25rem + 5vw, 6.5rem);

  /* Line Heights */
  --hero-leading-none: 0.9;
  --hero-leading-tight: 1.0;
  --hero-leading-snug: 1.1;
  --hero-leading-normal: 1.4;
  --hero-leading-relaxed: 1.6;

  /* Letter Spacing */
  --hero-tracking-tighter: -0.03em;
  --hero-tracking-tight: -0.02em;
  --hero-tracking-normal: -0.01em;
  --hero-tracking-wide: 0.02em;
  --hero-tracking-widest: 0.1em;

  /* Font Weights */
  --hero-weight-normal: 400;
  --hero-weight-medium: 500;
  --hero-weight-semibold: 600;
  --hero-weight-bold: 700;
  --hero-weight-extrabold: 800;
  --hero-weight-black: 900;
}

/* ============================================
   HERO DISPLAY - Bold Sans-Serif
   ============================================ */
.hero-display {
  font-family: var(--hero-font-display);
  font-size: var(--hero-text-4xl);
  font-weight: var(--hero-weight-extrabold);
  line-height: var(--hero-leading-tight);
  letter-spacing: var(--hero-tracking-tighter);
  color: var(--text-primary, #0f172a);
  text-wrap: balance;
}

/* ============================================
   HERO SUBTITLE
   ============================================ */
.hero-subtitle {
  font-family: var(--hero-font-body);
  font-size: var(--hero-text-lg);
  font-weight: var(--hero-weight-normal);
  line-height: var(--hero-leading-relaxed);
  letter-spacing: var(--hero-tracking-normal);
  color: var(--text-secondary, #475569);
  max-width: 650px;
}

.hero-subtitle--large {
  font-size: var(--hero-text-xl);
}

/* ============================================
   HERO EYEBROW
   ============================================ */
.hero-eyebrow {
  font-family: var(--hero-font-body);
  font-size: var(--hero-text-sm);
  font-weight: var(--hero-weight-semibold);
  letter-spacing: var(--hero-tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary, #6366f1);
  margin-bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.hero-eyebrow::before {
  content: '';
  width: 2.5rem;
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #14b8a6);
  border-radius: 2px;
}

/* ============================================
   GRADIENT TEXT - Clean & Modern
   ============================================ */
.hero-gradient-text {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-gradient-text--tech {
  background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 50%, #14b8a6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-gradient-text--success {
  background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================
   HERO VALUE PROPS
   ============================================ */
.hero-value-props {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2rem;
  margin: 1rem 0;
}

.hero-value-prop {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--hero-font-body);
  font-size: var(--hero-text-sm);
  font-weight: var(--hero-weight-medium);
  color: var(--text-secondary, #64748b);
}

.hero-value-prop__highlight {
  font-weight: var(--hero-weight-bold);
  color: #6366f1;
}

.hero-value-prop__highlight--success {
  color: #10b981;
}

.hero-value-prop__highlight--warning {
  color: #f59e0b;
}

/* ============================================
   HERO CTA
   ============================================ */
.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.hero-cta-text {
  font-family: var(--hero-font-body);
  font-size: var(--hero-text-sm);
  font-weight: var(--hero-weight-normal);
  color: var(--text-tertiary, #94a3b8);
  text-align: center;
  margin-top: 0.75rem;
}

/* ============================================
   HERO CONTAINER
   ============================================ */
.hero-content-wrapper {
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
}

/* ============================================
   SPACING UTILITIES
   ============================================ */
.hero-mb-sm { margin-bottom: 0.5rem; }
.hero-mb-md { margin-bottom: 0.75rem; }
.hero-mb-lg { margin-bottom: 1rem; }
.hero-mb-xl { margin-bottom: 1.5rem; }
.hero-mx-auto { margin-left: auto; margin-right: auto; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .hero-display {
    font-size: var(--hero-text-3xl);
  }

  .hero-subtitle {
    font-size: var(--hero-text-base);
    margin-bottom: 0.75rem;
  }

  .hero-value-props {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0;
  }

  .hero-eyebrow {
    margin-bottom: 0.75rem;
  }

  /* Hide decorative line on mobile for proper centering */
  .hero-eyebrow::before {
    display: none;
  }

  .hero-cta-group {
    margin-top: 1rem;
  }

  .hero-cta-text {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .hero-mb-lg {
    margin-bottom: 0.75rem;
  }
}

@media (max-width: 480px) {
  .hero-display {
    font-size: clamp(1.75rem, 1.5rem + 2vw, 2.25rem);
    line-height: 1.1;
    margin-bottom: 0.5rem;
  }

  .hero-subtitle {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
  }

  .hero-eyebrow {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }

  .hero-value-props {
    gap: 0.35rem;
    margin: 0.5rem 0;
  }

  .hero-value-prop {
    font-size: 0.8rem;
  }
}

/* ============================================
   DARK MODE
   ============================================ */
[data-theme="dark"] .hero-display {
  color: #f1f5f9;
}

[data-theme="dark"] .hero-subtitle {
  color: #94a3b8;
}

[data-theme="dark"] .hero-value-prop {
  color: #94a3b8;
}

[data-theme="dark"] .hero-eyebrow {
  color: #818cf8;
}