:root {
    --clr-body-bg: #E5E7EB;
    --clr-card-bg: white;
    --clr-body-text: #111827;
    --clr-card-text: #375151;
    --clr-border: black;
    --clr-button-bg: #059669;
    --clr-button-text: white;
    --clr-heading: #991B1B;
    --clr-link: #1E40AF;
}

@media (prefers-color-scheme: dark) {
  :root {
    --clr-body-bg: #111827;
    --clr-card-bg: #374151;
    --clr-body-text: #E5E7EB;
    --clr-card-text: white;
    --clr-border: white;
    --clr-button-bg: #A7F3D0;
    --clr-button-text: #1F2937;    
    --clr-heading: #EF4444;
    --clr-link: #93C5FD;
  }
}

html {
  color-scheme: dark light;
}
:root:has(#theme [value="light"]:checked) {
  color-scheme: light;
    --clr-body-bg: #E5E7EB;
    --clr-card-bg: white;
    --clr-body-text: #111827;
    --clr-card-text: #375151;
    --clr-border: black;
    --clr-button-bg: #059669;
    --clr-button-text: white;
    --clr-heading: #991B1B;
    --clr-link: #1E40AF;
}

:root:has(#theme [value="dark"]:checked) {
  color-scheme: dark;
    --clr-body-bg: #111827;
    --clr-card-bg: #374151;
    --clr-body-text: #E5E7EB;
    --clr-card-text: white;
    --clr-border: white;
    --clr-button-bg: #A7F3D0;
    --clr-button-text: #1F2937;    
    --clr-heading: #EF4444;
    --clr-link: #93C5FD;
}