:root {
    /* Light mode variables */
    --color-background: #ffffff;
    --color-text: #333333;
    --color-accent: #3b82f6;
    --color-secondary: #f4f4f5;
    --color-hover: #e4e4e7;
  }
  
  .dark {
    /* Dark mode variables */
    --color-background: #121212;
    --color-text: #e0e0e0;
    --color-accent: #3b82f6;
    --color-secondary: #27272a;
    --color-hover: #3f3f46;
  }
  
  /* Override Tailwind classes with custom variables */
  body {
    background-color: var(--color-background);
    color: var(--color-text);
  }
  
  .bg-blue-500 {
    background-color: var(--color-accent) !important;
  }
  
  .bg-zinc-100 {
    background-color: var(--color-secondary) !important;
  }
  
  .hover\:bg-zinc-100:hover {
    background-color: var(--color-secondary) !important;
  }
  
  .hover\:bg-zinc-200:hover {
    background-color: var(--color-hover) !important;
  }
  
  /* Dark mode specific styles */
  .dark a {
    color: #90caf9;
    text-decoration: none;
  }
  
  .dark hr {
    border-color: #444;
  }