:root {
  /* Abstractions */
  --color-bg: light-dark(#ffffff, var(--zinc-950));
  --color-text: light-dark(#000000, #ffffff);
  --color-text-reversed: light-dark(#ffffff, #000000);
  --color-text-subtle: light-dark(var(--zinc-500), var(--zinc-400));
  --color-link: light-dark(var(--blue-600), var(--blue-300));
  --color-link-hover: light-dark(var(--blue-800), var(--blue-200));
  --color-border-light: light-dark(var(--zinc-100), var(--zinc-900));
  --color-border: light-dark(var(--zinc-200), var(--zinc-800));
  --color-border-dark: light-dark(var(--zinc-400), var(--zinc-600));
  --color-selected: light-dark(var(--blue-100), var(--blue-950));
  --color-selected-dark: light-dark(var(--blue-300), var(--blue-800));
  --color-highlight: light-dark(var(--yellow-200), var(--yellow-900));

  /* Accent colors */
  --color-jfcs: #8a0054;
  --color-primary: light-dark(var(--purple-600), var(--purple-400));
  --color-secondary: light-dark(var(--zinc-200), var(--zinc-800));
  --color-negative: light-dark(var(--red-600), var(--red-500));
  --color-positive: light-dark(var(--green-600), var(--green-900));
  --color-alert-fg: var(--orange-500);
  --color-alert-bg: var(--yellow-200);
  --color-error: light-dark(var(--red-100), var(--red-400));
  --color-error-bg: light-dark(var(--red-100), var(--red-800));
  --color-notice: var(--blue-200);
  --color-success: var(--green-200);
  --color-unobtrusive-background: light-dark(
    var(--purple-100),
    var(--indigo-600)
  );

  /* SVG color values */
  --color-filter-text: light-dark(invert(0), invert(1));
  --color-filter-text-reversed: light-dark(invert(1), invert(0));
  --color-filter-negative: light-dark(
    invert(22%) sepia(85%) saturate(1790%) hue-rotate(339deg) brightness(105%)
      contrast(108%),
    invert(15%) sepia(65%) saturate(2067%) hue-rotate(339deg) brightness(102%)
      contrast(97%)
  );
  --color-filter-positive: light-dark(
    invert(44%) sepia(89%) saturate(409%) hue-rotate(89deg) brightness(94%)
      contrast(97%),
    invert(23%) sepia(62%) saturate(554%) hue-rotate(91deg) brightness(93%)
      contrast(91%)
  );
  --container-width: 80rem;
}

* {
  border-color: var(--color-border);
  scrollbar-color: #c1c1c1 transparent;
  scrollbar-width: thin;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-synthesis-weight: none;
  overscroll-behavior: none;
  text-rendering: optimizelegibility;
}

.turbo-progress-bar {
  background-color: var(--color-primary);
}

::selection {
  background-color: var(--color-selected);
}

a {
  color: var(--color-link);
  cursor: pointer;

  &:not(.btn) {
    text-decoration: underline;

    &:hover {
      color: var(--color-link-hover);
    }
  }

  &.link--uncolored {
    color: var(--color-text);
  }
}

h1 {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin-block-end: var(--size-4);
}

h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

h3 {
  font-weight: var(--font-semibold);
}

ol {
  /* `inside` means that the numbers are inside the bounding box, so it's easy to make them line up */
  list-style: decimal inside;
}

@media (prefers-color-scheme: dark) {
  select {
    background-color: rgb(0 0 0 / 100%);
  }
}