/* Typography System */

h1, .heading-1 {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
}

h2, .heading-2 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
}

h3, .heading-3 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

h4, .heading-4 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

h5, .heading-5 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

h6, .heading-6 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

body {
  padding-top: 4.5rem;
}

.text-large {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-loose);
}

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

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

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

.text-mono {
  font-family: var(--font-family-mono);
}

.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-light {
  color: var(--color-text-light);
}

.font-normal {
  font-weight: var(--font-weight-normal);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Responsive Typography */
@media (max-width: 768px) {
  h1, .heading-1 {
    font-size: var(--font-size-4xl);
  }
  
  h2, .heading-2 {
    font-size: var(--font-size-3xl);
  }
  
  h3, .heading-3 {
    font-size: var(--font-size-2xl);
  }

  body {
    padding-top: 4rem;
  }
}