/* Typography variables and base element styles
   Controls font-family, size, and color for h1–h6 and p.
   Override variables in :root or a wrapper (e.g., body) as needed. */

:root {
  /* Base fallbacks */
  --font-family-base: 'Source Sans Pro', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --heading-color: #333333;
  --text-color: #56585b;

  /* Paragraph */
  --p-font: var(--font-family-base);
  --p-size: 1.25rem; /* 20px */
  --p-color: var(--text-color);

  /* Headings */
  --h1-font: var(--font-family-base);
  --h1-size: 2rem;   /* 32px */
  --h1-color: var(--heading-color);

  --h2-font: var(--font-family-base);
  --h2-size: 1.75rem; /* 28px */
  --h2-color: var(--heading-color);

  --h3-font: var(--font-family-base);
  --h3-size: 1.5rem; /* 24px */
  --h3-color: var(--heading-color);

  --h4-font: var(--font-family-base);
  --h4-size: 1.25rem; /* 20px */
  --h4-color: var(--heading-color);

  --h5-font: var(--font-family-base);
  --h5-size: 1.125rem; /* 18px */
  --h5-color: var(--heading-color);

  --h6-font: var(--font-family-base);
  --h6-size: 1rem; /* 16px */
  --h6-color: var(--heading-color);
}

/* Apply variables to elements */
p {
  font-family: var(--p-font, var(--font-family-base));
  font-size: var(--p-size, 1rem);
  color: var(--p-color, var(--text-color, #56585b));
}
h1 {
  font-family: var(--h1-font, var(--font-family-base));
  font-size: var(--h1-size, 2rem);
  color: var(--h1-color, var(--heading-color, #333333));
}
h2 {
  font-family: var(--h2-font, var(--font-family-base));
  font-size: var(--h2-size, 1.75rem);
  color: var(--h2-color, var(--heading-color, #333333));
}
h3 {
  font-family: var(--h3-font, var(--font-family-base));
  font-size: var(--h3-size, 1.5rem);
  color: var(--h3-color, var(--heading-color, #333333));
}
h4 {
  font-family: var(--h4-font, var(--font-family-base));
  font-size: var(--h4-size, 1.25rem);
  color: var(--h4-color, var(--heading-color, #333333));
}
h5 {
  font-family: var(--h5-font, var(--font-family-base));
  font-size: var(--h5-size, 1.125rem);
  color: var(--h5-color, var(--heading-color, #333333));
}
h6 {
  font-family: var(--h6-font, var(--font-family-base));
  font-size: var(--h6-size, 1rem);
  color: var(--h6-color, var(--heading-color, #333333));
}