:root {
  --color-primary: oklch(0.99 0 197);
  --color-primary-contrast: oklch(0.3 0.03 196 / 1);

  --color-primary-highlight: oklch(0.35 0.15 145 / 1);
  --color-seconday-highlight: oklch(0.35 0.17 29.5 / 1);

  font-family: -system-ui, sans-serif;
  font-size: 1.25em;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --color-primary: oklch(0.3 0.03 196 / 1);
    --color-primary-contrast: oklch(0.99 0 197);

    --color-primary-highlight: oklch(0.95 0.05 196 / 1);
    --color-seconday-highlight: oklch(0.95 0.15 116 / 1);
  }
}

::selection {
  background-color: var(--color-primary-contrast);
  color: var(--color-primary);
}

:any-link {
  color: var(--color-primary-highlight);

  :visited {
    color: var(--color-seconday-highlight);
  }
}

body {
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
}