/* Component: Typography | /css/components/typography.css */

/* ── Headings ────────────────────────────────── */
h1 {
  font-family: var(--font-secondary);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-heading);
}

h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
  font-weight: var(--weight-bold);
  line-height: var(--leading-normal);
  color: var(--color-text-heading);
}

/* ── Body & Paragraphs ──────────────────────── */
p {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

/* Custom layout/text tags from original HTML tags */
p1 {
  color: var(--color-text-secondary);
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  letter-spacing: -3%;
  display: inline-block;
}

bl {
  font-family: var(--font-secondary);
  font-weight: var(--weight-semibold);
  font-size: var(--text-4xl);
  line-height: var(--leading-normal);
  letter-spacing: -4%;
  color: var(--color-black);
  display: inline-block;
}

/* ── Links ───────────────────────────────────── */
a {
  color: var(--color-text-link);
  transition: color 0.2s, background 0.2s;
}

a:hover {
  color: var(--color-text-link-hover);
}

/* ── Utility Text Classes ────────────────────── */
.text-sm {
  font-size: var(--text-sm);
}

.text-lg {
  font-size: var(--text-lg);
}

.grad-text {
  background: var(--color-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}