:root {
  /* Tells the browser the page supports both themes */
  color-scheme: light dark; 

  /* Defines variables using light-dark(light-value, dark-value) */
  --background: light-dark(#eeeeee, #121212);
  --text: light-dark(#1a1a1a, #ffffff);
  --accent: light-dark(#0066cc, #99ccff);
}

body {
  background-color: var(--background);
  color: var(--text);
  font-family: system-ui, sans-serif;
  transition: background-color 0.3s, color 0.3s;
}