/* Base element styling built on top of the design tokens */
body {
  font-family: var(--font-sans);
  background: var(--c-bg);
  color: var(--c-text);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

::selection {
  background: var(--c-brand);
  color: var(--c-brand-contrast);
}

h1,
h2,
h3 {
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

code,
kbd,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

a:hover {
  color: var(--c-brand);
}

:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--c-border);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--c-text-faint);
}