/**
 * Typography defaults (classic markup) driven by tokens.css variables.
 *
 * Global by default (no wrapper needed).
 *
 * Important: don't use :where() for the element selectors here, otherwise the
 * rules get 0 specificity and can lose against your reset.css.
 */


h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

h1 {
  font-size: var(--text-xxl);
  line-height: var(--text-xxl--line-height, 1.2);
}

h2 {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height, 1.25);
}

h3 {
  font-size: var(--text-l);
  line-height: var(--text-l--line-height, 1.5);
}

h4 {
  font-size: var(--text-m);
  line-height: var(--text-m--line-height, 1.5);
}

h5 {
  font-size: var(--text-s);
  line-height: var(--text-s--line-height, 1.25);
}

h6 {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height, 1.25);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

p {
  margin: 0 0 var(--spacing-m) 0;
}

.text-muted, small {
  font-size: var(--text-s);
  line-height: var(--text-s--line-height, 1.25);
}


ul, ol {
  margin: 0 0 var(--spacing-m) 0;
  padding-left: calc(var(--spacing-l) * 1.25);
}

li {
  margin: var(--spacing-xxs) 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--spacing-l) 0;
}

blockquote {
  margin: 0 0 var(--spacing-m) 0;
  padding: var(--spacing-s) var(--spacing-m);
  border-left: 2px solid var(--border);
  background: var(--muted);
}

code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 0.1em 0.35em;
}

pre {
  margin: 0 0 var(--spacing-m) 0;
  padding: var(--spacing-m);
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
}

pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: var(--text-s);
  line-height: var(--leading-relaxed, 1.5);
}

/* Space between stacked typographic blocks */
:is(h1, h2, h3, h4, h5, h6) + :is(p, ul, ol, blockquote, pre) {
  margin-top: 0;
}

/* Don't underline "button-like" links */
a.btn,
a.dashboard__nav-item,
a.project-card,
a.project-card__actions {
  text-decoration: none;
}