@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --background: #FBFAF8;
    --text: #1F2933;
    --link: #8B2B26;
    --link-hover: #5A1F1C;
    --accent-1: color-mix(in srgb, #1F2933 5%, #FBFAF8);
    --accent-2: color-mix(in srgb, #1F2933 17%, #FBFAF8);
    --accent-3: color-mix(in srgb, #1F2933 75%, #FBFAF8);
    --highlight: color-mix(in srgb, #1F2933 10%, #FBFAF8);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #0F0F10;
    --text: #E4E2DA;
    --link: #9EA3D8;
    --link-hover: #8B8F97;
    --accent-1: color-mix(in srgb, #E4E2DA 5%, #0F0F10);
    --accent-2: color-mix(in srgb, #E4E2DA 17%, #0F0F10);
    --accent-3: color-mix(in srgb, #E4E2DA 75%, #0F0F10);
    --highlight: color-mix(in srgb, #E4E2DA 10%, #0F0F10);
  }
}