@layer reset, typography, root, layout, section, page, utility;

:root {
  --black: 0, 0, 0;
  --sub-dk-gray: 16, 16, 16;
  --dk-gray: 32, 32, 32;
  --super-dk-gray: 80, 80, 80;
  --mid-gray: 128, 128, 128;
  --sub-lt-gray: 175, 175, 175;
  --lt-gray: 223, 223, 223;
  --super-lt-gray: 240, 240, 240;
  --white: 255, 255, 255;

  --lt-blue: 69, 212, 243;
  --mid-blue: 26, 169, 239;
  --dk-blue: 63, 46, 231;
  --purple: 161, 49, 232;
  --lilac: 187, 121, 245;

  --background: var(--white);

  --separator-color: rgb(var(--lt-gray));
  --header-border-color: var(--separator-color);
  --footer-border-color: var(--separator-color);

  --box-shadow-color: rgba(var(--lt-gray), 0.8);
  --header-box-shadow-color: var(--box-shadow-color);

  --body-item-spacing: 4rem;
  --body-code-background-color: rgb(var(--super-lt-gray));

  --header-series-arrow-foreground-color: rgb(var(--sub-dk-gray));

  --html-background-color: rgb(var(--background));

  --nav-bulleted-spacing: 0.75rem;

  --platter-background-color: rgba(var(--white), var(--platter-background-opacity));
  --platter-background-opacity: 0.6;
  --platter-backdrop-filter: blur(10px);

  --content-width: 80rem;

  --tag-foreground-color: rgb(var(--super-dk-gray));
  --tag-background-color: rgb(var(--super-lt-gray));
  --tag-spacer-foreground-color: rgb(var(--super-dk-gray));
  --tag-hover-background-color: rgb(var(--sub-lt-gray));

  --transition-duration: 0.7s;

  --menu-icon-size: 20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: var(--black);

    --separator-color: rgb(var(--dk-gray));
    --box-shadow-color: rgba(var(--dk-gray), 0.8);
    --body-code-background-color: rgb(var(--dk-gray));

    --header-series-arrow-foreground-color: rgb(var(--super-dk-gray));

    --html-background-color: rgb(var(--background));

    --platter-background-color: rgba(var(--black), var(--platter-background-opacity));
    --platter-backdrop-filter: brightness(0.66) blur(10px);

    --tag-foreground-color: rgb(var(--sub-lt-gray));
    --tag-background-color: rgb(var(--dk-gray));
    --tag-spacer-foreground-color: rgb(var(--super-dk-gray));
    --tag-hover-background-color: rgb(var(--super-dk-gray));
    --tag-hover-foreground-color: rgb(var(--mid-gray));

    --twitter-icon: url(/icons/twitter-dark.svg);
    --github-icon: url(/icons/github-dark.svg);
    --instagram-icon: url(/icons/instagram-dark.svg);
    --feed-icon: url(/icons/rss-dark.svg);
  }
}

@layer root {
  blockquote {
    --line-width: 4px;

    border-inline-start: var(--line-width) solid var(--separator-color);
    padding-inline-start: calc(3rem - var(--line-width));
    margin-block: 0;
    margin-inline: 0;
  }

  code {
    background-color: var(--body-code-background-color);
  }

  code.nobg {
    background: none;
    border-radius: 0;
    display: inline-block;
    margin: 0;
    padding: 0;
  }

  details {
    width: 100%;
  }

  details:has(#TableOfContents) {
    box-sizing: border-box;
    border: 1px solid var(--separator-color);
    padding: var(--body-item-spacing);
  }

  fieldset {
    box-sizing: border-box;
    border: 1px solid var(--separator-color);
    padding: var(--body-item-spacing);
    padding-top: calc(var(--body-item-spacing) / 10);
  }

  html {
    background-color: var(--html-background-color);
  }

  img {
    height: auto;
    max-width: 100%;
    width: 100%;
  }

  img.circular {
    shape-outside: circle(50%);
    -webkit-clip-path: circle(50%);
    clip-path: circle(50%);
  }

  main {
    box-sizing: border-box;
    margin-block-start: var(--body-item-spacing);
    width: 100%;
  }

  nav.bulleted>li:first-child::before {
    content: "";
    margin-inline: 0;
  }

  nav.bulleted>li::before {
    color: var(--heading-color);
    content: "•";
    font-size: 60%;
    font-weight: normal;
    opacity: 80%;
    margin-inline: var(--nav-bulleted-spacing);
  }

  ul,
  ol,
  dl,
  ul>li,
  ol>li,
  dl>dt {
    margin-inline-start: calc(var(--body-item-spacing) + 2px);
  }

  ul>li>ul,
  ul>li>ol,
  ol>li>ul,
  ol>li>ol {
    margin-inline-start: 0;
  }

  :is(ul, ol) > li {
      margin-block-start: 1rem;
  }

  header>span.series {
    font-size: 1.75rem;
    letter-spacing: 1px;
    margin-inline-start: 0.5em;
  }

  header>span.series::before {
    color: var(--header-series-arrow-foreground-color);
    content: "↳";
    margin-inline-end: 0.25em;
  }

  table {
    border: 1px solid var(--separator-color);
    border-collapse: collapse;
    margin-inline: auto;
    width: 50%;
  }

  td,
  th {
    border: 1px solid var(--separator-color);
    padding-inline: 1rem;
  }

  p, ul {
      grid-column: content-start / content-end;
  }
}