/* ============================================================
   TYPOGRAPHY — Base text styles & heading scale
   ============================================================ */

/* ---- Document ---- */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: var(--leading-normal);
}

/* ---- Heading scale (style-guide classes) ---- */
/* Mobile-first sizes, scale up at md (768px)  */

.heading-1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-neutral-900);
  letter-spacing: -0.02em;
}

.heading-2 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-neutral-800);
  letter-spacing: -0.015em;
}

.heading-3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-neutral-700);
}

.heading-4 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-neutral-700);
}

@media (min-width: 768px) {
  .heading-1 { font-size: var(--text-3xl); }
  .heading-2 { font-size: var(--text-2xl); }
  .heading-3 { font-size: var(--text-xl); }
  .heading-4 { font-size: var(--text-lg); }
}

/* ---- Body text styles ---- */
.body-lg {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

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

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

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

/* ---- Label style ---- */
.label-text {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
}

/* ---- Code ---- */
code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

pre {
  overflow-x: auto;
  padding: var(--space-4);
  background-color: var(--color-neutral-100);
  border-radius: var(--radius-md);
}

code {
  background-color: var(--color-neutral-100);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.3em;
}

pre code {
  background: none;
  padding: 0;
}

/* ---- Links ---- */
.link {
  color: var(--color-brand);
  font-weight: var(--font-medium);
  transition: color var(--transition-base);
}

.link:hover {
  color: var(--color-brand-hover);
  text-decoration: underline;
}