/* Typography Variables */
:root {
  --font-display: 'DM Serif Display', serif;
  --font-sans: 'DM Sans', system-ui, sans-serif;

  --weight-light: 300;
  --weight-medium: 500;
  --weight-bold: 700;

  --text-base-size: 1rem;
  /* 16px */
  --text-large: 1.25rem;
  /* 20px */
  --text-small: 0.875rem;
  /* 14px */
  --text-heading: 2rem;
  /* 32px */
  --text-hero: 3rem;
  /* 48px */
}

/* Base Typography */
body {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  line-height: 1.6;
  font-size: var(--text-base-size);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  margin-top: 0;
  color: var(--dg-navier-900);
}

h1 {
  font-size: var(--text-hero);
}

h2 {
  font-size: var(--text-heading);
}

h3 {
  font-size: 1.5rem;
}

/* Paragraphs */
p {
  margin: 0 0 1rem 0;
  font-size: var(--text-base-size);
  font-weight: var(--weight-light);
}

/* Links */
a {
  color: var(--dg-teal-500);
  text-decoration: underline;
  font-weight: var(--weight-medium);
}

a:hover {
  color: var(--dg-teal-700);
  text-decoration: none;
}

/* Utility Typography Classes */
.text-center {
  text-align: center;
}

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

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

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

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

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

.italic {
  font-style: italic;
}