:root {
  /* Light theme (default) */
  --color-bg: #f8f9fa;
  --color-text: #2d2a26;
  --color-link: #06c;
  --color-text-subtle: #6b5d4d;

  /* Highlight colors */
  --highlight-yellow: #ffff0080;
  --highlight-orange: #ffa50080;
  --highlight-blue: #87ceeb80;
  --highlight-green: #00ff0080;
  --highlight-pink: #ffb6d980;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #2d2419;
    --color-text: #e8dcc8;
    --color-link: #6db3f2;
    --color-text-subtle: #b8a88a;
    --highlight-yellow: #ffff0040;
    --highlight-orange: #ffa50040;
    --highlight-blue: #87ceeb40;
    --highlight-green: #00ff0040;
    --highlight-pink: #ffb6d940;
  }
}