:root {
  --bg-color: rgba(255, 255, 255, 0.7);
  --bg-span-color: rgba(120, 120, 120, 0.2);
  --bg-li-color: rgba(250, 250, 250, 0.3);
  --border-color: rgba(200, 200, 200, 1);
  --text-color: #333333;
  --link-color: #007bff;
  --table-row-odd-bg-color: #f9f9f9;
  --table-row-hover-bg-color: #f5f5f5;
  --highlight-background: #f3f3f3;
  --highlight-foreground: #444;
  --bg-header-fixed: rgba(250, 250, 250, 0.8);
  --footer-bg: rgba(255, 255, 255, 0.7);
  --footer-border: #e0e0e0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: rgba(26, 26, 26, 0.9);
    --bg-span-color: rgba(50, 50, 50, 1);
    --bg-li-color: rgba(51, 51, 51, 0.3);
    --border-color: rgba(250, 250, 250, 0.3);
    --text-color: #f8f9fa;
    --link-color: #4dabf7;
    --table-row-odd-bg-color: #282828;
    --table-row-hover-bg-color: #363636;
    --highlight-background: #3b3b3b;
    --highlight-foreground: #fff;
    --bg-header-fixed: rgba(18, 18, 18, 0.8);
    --footer-bg: rgba(20, 20, 20, 0.7);
    --footer-border: #333;
  }
}
