/* =========================================
   HR NextGen Solutions - Typography
   Google Fonts + Type Scale
   ========================================= */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* Headings */
h1 {
  font-size: var(--text-6xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
}

h4 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

h5 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}

h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}

/* Body text */
p {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.text-large {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
}

.text-small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

/* Section label / eyebrow text */
.section-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--color-white);
  vertical-align: middle;
  margin-right: var(--space-2);
  border-radius: var(--radius-full);
}

/* Section heading block */
.section-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.section-header h2 {
  margin-bottom: var(--space-4);
}

.section-header p {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Gradient text in headings - animated background-position */
.heading-gradient {
  background: linear-gradient(90deg, #2563EB, #4F46E5, #2563EB);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientTextShift 4s linear infinite;
}

/* Responsive typography */
@media (max-width: 1024px) {
  h1 { font-size: var(--text-5xl); }
  h2 { font-size: var(--text-3xl); }
}

@media (max-width: 768px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
  .section-header { margin-bottom: var(--space-10); }
  .section-header p { font-size: var(--text-base); }
}

@media (max-width: 480px) {
  h1 { font-size: var(--text-3xl); letter-spacing: -0.02em; }
  h2 { font-size: var(--text-2xl); }
}