@layer theme {
  /* ---------- Color ---------- */
  /* Dark mode */
  :root {
    --color-neutral-0: oklch(24.29% 0.0114 293.18);
    --color-neutral-25: oklch(40% 0.02 293.18);
    --color-neutral-75: oklch(60% 0.02 293.18);
    --color-neutral-100: oklch(95% 0.0114 293.18);
    --color-accent-0: oklch(83.28% 0.1711 81.97);
    --color-accent-100: oklch(0.7161 0.146875 82);
  }

  /* Light mode */ /* TODO: Make a better neutral palette for light mode */
  @media (prefers-color-scheme: light) {
    :root {
      --color-neutral-0: oklch(95% 0.0114 293.18);
      --color-neutral-25: oklch(60% 0.02 293.18);
      --color-neutral-57500: oklch(40% 0.02 293.18);
      --color-neutral-100: oklch(24.29% 0.0114 293.18);
      --color-accent-0: oklch(0.5149 0.2796875 296);
      --color-accent-100: oklch(0.6624 0.2015625 296);
    }
  }

  /* ---------- Layout ---------- */
  :root {
    --layout-measure: 60ch; /* Sets global max character length per line of text. */
    --layout-padding: clamp(16px, 3svmin, 32px);
  }

  /* ---------- Type ---------- */
  :root {
    font-size: calc(
      1rem + 0.5vw
    ); /* Default font size that scales with viewport width. */
  }

  /* ---------- Animation ---------- */
  :root {
    --transition-speed: 0.2s;
    --transition-function: cubic-bezier(0.37, 1, 0.74, 1);
    --transition: all var(--transition-speed) var(--transition-function); /* Prefer to use specific property. */
  }

  /* ---------- PRIMITIVES ---------- */

  :root {
    --space-3xs: clamp(0.25rem, 0.2256rem + 0.122vi, 0.3125rem);
    --space-2xs: clamp(0.5rem, 0.4268rem + 0.3659vi, 0.6875rem);
    --space-xs: clamp(0.75rem, 0.6524rem + 0.4878vi, 1rem);
    --space-s: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem);
    --space-m: clamp(1.5rem, 1.3049rem + 0.9756vi, 2rem);
    --space-l: clamp(2rem, 1.7561rem + 1.2195vi, 2.625rem);
    --space-xl: clamp(3rem, 2.6341rem + 1.8293vi, 3.9375rem);
    --space-2xl: clamp(4rem, 3.5122rem + 2.439vi, 5.25rem);
    --space-3xl: clamp(6rem, 5.2683rem + 3.6585vi, 7.875rem);
  }

  /* caret-color: var(--color-theme); */ /*TODO: Find somewhere to put this caret-color rule. */

  /* ---------- TOKENS ---------- */
  :root {
    /* Sizing */
    --ratio: 1.61803398875rem;
    --layout-repeat: 3;
    --layout-space: clamp(16px, 3svmin, 32px);
    --layout-measure: 60ch;
    /* https://every-layout.dev/rudiments/axioms/#a-universal-value
  https://imperavi.com/books/ui-typography/basis/line-length */

    /* Color */
    --color-dark: var(--color-neutral-0);
    --color-medium: var(--color-neutral-25);
    --color-light: var(--color-neutral-72);
    --color-bright: var(--color-neutral-100);
    --color-theme: var(--color-accent-0);

    /* Text */
    --font-size: clamp(16px, 2svmin, 24px);
    --line-height: 1.6;
    --text-color: var(--color-light);
    --link-color: var(--color-bright);

    /* Other */
    --border: 1px solid var(--color-medium);
    --border-radius: 2px;
    --transition: all 0.2s cubic-bezier(0.37, 1, 0.74, 1);
  }

  /* extra-juicy theme color for cool monitors */
  @media (color-gamut: p3) {
    :root {
      --color-theme: oklch(83.28% 0.1911 81.97);
    }
  }

  /* ---------- SIZE/SPACE ---------- */
  /* TODO: This ruleset overrides the media max-inline-size from reset.css. */
  * {
    max-inline-size: var(--layout-measure);
  }

  html,
  body,
  div,
  main,
  header,
  nav,
  footer,
  section,
  details,
  summary,
  figure {
    max-inline-size: none;
  }

  main {
    margin-block-start: var(--layout-space);
    margin-inline: var(--layout-space);
  }

  main.cover {
    margin-block-start: 0;
  }

  img {
    /* https://every-layout.dev/layouts/frame/ - global responsive images */
    max-inline-size: 100%;
    block-size: auto;
    /* FIXME: 11ty image plugin needs this for some reason to avoid vertically stretching images */
  }

  /* ---------- TYPE ----------*/
  body {
    font-size: var(--font-size);
    font-family: var(--font-family);
    line-height: var(--line-height);
    color: var(--text-color);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: var(--font-size);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
  }

  /* h1 {
  font-size: var(--size-step-3);
}

h2 {
  font-size: var(--size-step-2);
} */

  /* https://piccalil.li/links/chilled-out-text-underlines */
  a {
    color: var(--link-color);
    text-underline-offset: 0.3ex;
  }

  a:not(:is(:hover, :focus)) {
    text-decoration-color: color-mix(in srgb, currentColor, transparent 75%);
  }

  /* ---------- COLOR ----------*/
  html {
    background-color: var(--color-dark);
  }
}