/* ==========================================================================
   Typography Styles
   ========================================================================== */

/* Headings - using Pollen scale system */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text);
  font-family: "Tiny5";
  font-weight: var(--weight-medium);
  margin-top: 0;
  margin-bottom: var(--size-4);
}

h1 {
  font-size: var(--scale-6);
}
h1:first-of-type {
  position: sticky;
  top: 0;
  left: 0;
  padding: var(--size-3) 0;
  background-color: var(--color-background);
}
h2 {
  font-size: var(--scale-5);
}
h3 {
  font-size: var(--scale-4);
}
h4 {
  font-size: var(--scale-3);
}
h5 {
  font-size: var(--scale-2);
}
h6 {
  font-size: var(--scale-1);
}

p {
  margin-top: 0;
  margin-bottom: var(--size-4);
}

/* Links */
a {
  color: var(--color-text);
  text-decoration: underline;
}

a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* Code blocks */
code {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-mono);
  border-radius: var(--radius-sm);
}

pre {
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

pre code {
  background: none;
  border: none;
}