:root {
  --neutral-light-900: hsl(0deg, 0%, 97%);
  --neutral-light-800: hsl(0deg, 0%, 91%);
  --neutral-light-700: hsl(0deg, 0%, 84%);
  --neutral-light-600: hsl(0deg, 0%, 76%);
  --neutral-light-500: hsl(0deg, 0%, 67%);
  --neutral-light-400: hsl(0deg, 0%, 57%);
  --neutral-light-300: hsl(0deg, 0%, 44%);
  --neutral-light-200: hsl(0deg, 0%, 34%);
  --neutral-light-100: hsl(0deg, 0%, 21%);
  --neutral-light-50: hsl(0deg, 0%, 7%);

  --neutral-dark-900: hsl(0deg, 0%, 7%);
  --neutral-dark-800: hsl(0deg, 0%, 13%);
  --neutral-dark-700: hsl(0deg, 0%, 20%);
  --neutral-dark-600: hsl(0deg, 0%, 28%);
  --neutral-dark-500: hsl(0deg, 0%, 37%);
  --neutral-dark-400: hsl(0deg, 0%, 47%);
  --neutral-dark-300: hsl(0deg, 0%, 58%);
  --neutral-dark-200: hsl(0deg, 0%, 70%);
  --neutral-dark-100: hsl(0deg, 0%, 83%);
  --neutral-dark-50: hsl(0deg, 0%, 97%);
}

:root {
  --background-site-body: var(--neutral-light-900);
  --background-site-rectangle: hsl(0deg, 0%, 95%);
  --color-site-subtle: var(--neutral-light-300);
  --color-site-normal: var(--neutral-light-200);
  --color-site-emphasis: var(--neutral-light-100);
  --color-site-stress: var(--neutral-light-50);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-site-body: var(--neutral-dark-800);
    --background-site-rectangle: hsl(0deg, 0%, 17%);
    --color-site-subtle: var(--neutral-dark-300);
    --color-site-normal: var(--neutral-dark-200);
    --color-site-emphasis: var(--neutral-dark-100);
    --color-site-stress: var(--neutral-dark-50);
  }
}