/* 
  Fluid Typography System 
  Values calculated to scale from 320px (mobile) to 1280px (desktop)
*/
:root {
  --text-xs: clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);
  --text-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.16rem + 0.43vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.36rem + 0.65vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.66rem + 1.09vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.9rem + 1.74vw, 3.25rem);
  --text-5xl: clamp(3rem, 2.48rem + 2.61vw, 4.5rem);
  --text-6xl: clamp(3.75rem, 2.97rem + 3.91vw, 6rem);
  --text-7xl: clamp(4.5rem, 3.28rem + 6.09vw, 8rem);
  --text-hero: clamp(5rem, 3.43rem + 7.83vw, 9.5rem);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em; /* Tighter tracking for premium feel */
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.heading-hero {
  font-size: var(--text-hero);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.heading-1 { font-size: var(--text-7xl); letter-spacing: -0.03em; }
.heading-2 { font-size: var(--text-6xl); letter-spacing: -0.02em; }
.heading-3 { font-size: var(--text-5xl); letter-spacing: -0.02em; }
.heading-4 { font-size: var(--text-4xl); letter-spacing: -0.01em; }
.heading-5 { font-size: var(--text-3xl); letter-spacing: -0.01em; }
.heading-6 { font-size: var(--text-2xl); }

p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
  max-width: 65ch; /* Optimal reading width */
}

p.lead {
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  line-height: 1.5;
  font-weight: 400;
}

p.small {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ease-out-expo);
}

/* Gradients for text reveals */
.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #A1A1AA 100%);
}

.text-gradient-accent {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-image: linear-gradient(135deg, #FFFFFF 0%, var(--color-accent-secondary) 100%);
}