:root {
  --bg-linen: #FCFBF7;
  --ink: #262220;
  --ink-soft: #6E665E;
  --ink-faint: #9E958B;
  --terracotta: #C25E41;
  --line: #EAE3D7;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-linen);
  color: var(--ink);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-serif-clean {
  font-family: 'Newsreader', Georgia, serif;
}

.font-hand {
  font-family: 'Caveat', cursive;
}

.btn-speak-active {
  border-color: var(--terracotta) !important;
  color: var(--terracotta) !important;
  background-color: rgba(194, 94, 65, 0.06) !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 1.5px solid var(--terracotta);
  outline-offset: 3px;
}