:root {
  --color-base: light-dark(hsl(220deg, 23%, 95%), hsl(240deg, 21%, 15%));
  --color-text: light-dark(hsl(234deg, 16%, 35%), hsl(226deg, 64%, 88%));
  --color-peach: light-dark(hsl(22deg, 99%, 52%), hsl(23deg, 92%, 75%));
  --color-yellow: light-dark(hsl(35deg, 77%, 49%), hsl(41deg, 86%, 83%));
  --color-green: light-dark(hsl(109deg, 58%, 40%), hsl(115deg, 54%, 76%));
  --color-teal: light-dark(hsl(183deg, 74%, 35%), hsl(170deg, 57%, 73%));
  --color-crust: light-dark(hsl(220deg, 21%, 89%), hsl(240deg, 23%, 9%));
  --color-accent: var(--color-peach);
}

@layer reset {
  body {
    max-inline-size: 60ch;
    margin-inline: auto;
    padding-inline: 2rem;
    font-size: 1.2rem;
    font-family: "Inter", sans-serif;
    line-height: 1.5;
  }

  header nav {
    margin-block-start: 2rem;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Spline Sans", sans-serif;
  }

  h1 {
    font-size: 3.4rem;
    line-height: 4.5rem;
    margin-block: 1.5rem 2rem;
  }

  h2 {
    font-size: 2.28rem;
    line-height: 3rem;
    margin-block: 1.5rem;
  }

  h3 {
    font-size: 1.5rem;
    line-height: 3rem;
    margin-block: 1.5rem 0rem;
  }

  h4, h5 {
    font-size: 1rem;
    line-height: 1.5rem;
    margin-block: 1.5rem 0rem;
  }

  p, ul, ol, pre, table, blockquote {
    margin-top: 0rem;
    margin-bottom: 1.5rem;
  }

  ul ul, ol ol, ul ol, ol ul {
    margin-top: 0rem;
    margin-bottom: 0rem;
  }

  a, b, i, strong, em, small, code {
    line-height: 0;
  }

  sub, sup {
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sup {
    top: -0.5em;
  }

  sub {
    bottom: -0.25em;
  }

  img {
    display: block;
    max-inline-size: 100%;
  }
}

@layer colors {
  body {
    color: var(--color-text);
    background: var(--color-base);
  }

  .zola-anchor {
    color: var(--color-text);
    text-decoration: none;
  }

  a {
    color: var(--color-accent);

    :visited {
      color: var(--color-accent);
    }

    &:hover, &:focus-visible {
      color: var(--color-yellow);
    }

    nav & {
      font-weight: bold;
      text-decoration: underline;
      text-decoration-thickness: 2px;
    }
  }

  em {
    color: var(--color-teal);
  }

  strong {
    color: var(--color-green);
  }

  p code {
    padding-inline: 0.4rem;
    border-radius: 8px;
    background: var(--color-crust);
  }

  li::marker {
    color: var(--color-green);
  }
}