:root {
  --page-background: #f3f6f5;
  --text-primary: #1d2927;
  --text-secondary: #61706d;
  --heading: #1d2927;
  --link: #176b66;
  --link-hover: #0f514d;
  --accent: #b36a3c;
  --rule: #cbd5d2;
  --soft-accent: rgba(23, 107, 102, 0.08);
}

body {
  background-color: var(--page-background);
  color: var(--text-secondary);
  font-family: "Figtree", "Helvetica Neue", Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading);
  font-family: "Newsreader", Georgia, serif;
}

h1,
h2 {
  font-weight: 600;
  letter-spacing: -0.015em;
}

h3,
h4,
h5,
h6 {
  font-weight: 500;
}

a {
  color: var(--link);
  text-decoration-color: rgba(23, 107, 102, 0.45);
  text-underline-offset: 0.14em;
}

a:hover,
a:focus {
  color: var(--link-hover);
}

strong,
dt,
th,
header ul a strong {
  color: var(--text-primary);
}

hr,
section {
  border-color: var(--rule);
}

hr {
  background: var(--rule);
}

blockquote {
  border-left-color: var(--accent);
}

header > h1 {
  font-size: 32px;
}

header ul {
  background: var(--soft-accent);
  border-color: var(--rule);
}

header ul a,
a small,
small {
  color: var(--text-secondary);
}

header ul a:hover,
header ul a:focus {
  color: var(--link-hover);
}

header ul a:active {
  background-color: var(--soft-accent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-background: #14201f;
    --text-primary: #e2ece9;
    --text-secondary: #9eaeaa;
    --heading: #e2ece9;
    --link: #65c1b8;
    --link-hover: #8dd5ce;
    --accent: #df9565;
    --rule: #344744;
    --soft-accent: rgba(101, 193, 184, 0.10);
  }

  code,
  pre {
    color: var(--text-primary);
  }

  pre {
    background: rgba(0, 0, 0, 0.16);
    border-color: var(--rule);
  }
}