:root {
  --radius: 8px;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  /* Color scheme */

  color-scheme: light;

  --color-bg: oklch(98.4% 0.003 247.858);
  --color-bg-elem: oklch(20.8% 0.042 265.755);
  --color-bg-elem-muted: oklch(20.8% 0.042 265.755);
  --color-sf: oklch(98.4% 0.003 247.858);
  --color-sf-elem: oklch(12.9% 0.042 264.695);
  --color-sf-elem-muted: oklch(12.9% 0.042 264.695);
  /* Color of element outlines, e.g. on hover */

  /*--color-amethyst: oklch(0.6076 0.1561 305.32);*/
  --color-amethyst: oklch(0.4644 0.1154 305.29);
  --color-coral: oklch(0.6588 0.168 40.25);

  --color-outline: oklch(94.3% 0.03 294.588 / 0.35);
  --color-blockquote: var(--color-coral);
}

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

    --color-bg: oklch(27.9% 0.041 260.031);
    --color-bg-elem: oklch(92.9% 0.013 255.508);
    --color-bg-elem-muted: oklch(92.9% 0.013 255.508);
    --color-sf: oklch(20.8% 0.042 265.755);
    --color-sf-elem: oklch(98.4% 0.003 247.858);
    --color-sf-elem-muted: oklch(98.4% 0.003 247.858);
    /* Color of element outlines, e.g. on hover */
    --color-outline: oklch(40.4% 0.057 293.283);
    /*--color-amethyst: oklch(0.6076 0.1561 305.32);*/
    --color-amethyst: oklch(89.4% 0.057 293.283);
    --color-coral: oklch(0.7351 0.168 40.25);
  }
}

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

body {
  background-color: var(--color-bg);
  font-family: var(--font-text);
  color: var(--color-bg-elem)
}