html:root {
  --brand: 108 48% 31%;
  --brand-light: 97 55% 42%;
  --brand-h: 108;
  --brand-s: 48%;
  --brand-text: 108 48% 27%;
  --background: 0 0% 97%;
  --foreground: 210 12% 10%;
  --muted: 100 7% 90%;
  --muted-foreground: 210 5% 39%;
  --border: 100 7% 75%;
  --card: 0 0% 100%;
  --card-foreground: 210 12% 10%;
  --radius: 0.25rem;
  --site-font-body: system-ui, sans-serif;
  --site-font-heading: system-ui, sans-serif;
}

html.dark {
  --brand: 99 56% 43%;
  --brand-light: 95 62% 55%;
  --brand-h: 99;
  --brand-s: 56%;
  --brand-text: 95 62% 65%;
  --background: 210 14% 7%;
  --foreground: 0 0% 94%;
  --muted: 210 9% 14%;
  --muted-foreground: 100 5% 65%;
  --border: 210 8% 24%;
  --card: 210 11% 10%;
  --card-foreground: 0 0% 94%;
}