/* Base Variables */
:root {
    --font-family: 'Roboto', sans-serif;
    --font-size-base: 1rem;
    --font-size-small: 0.875rem;
    --font-size-large: 1.25rem;
  
    --border-radius: 0.6rem;
    --padding-base: 1rem;
    --gap-base: 1rem;
  
    --transition-fast: 0.3s ease;
    --transition-slow: 0.5s ease;
  
    --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  }
  
  /* Light Theme */
  .theme-light {
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #1e1e1e;
    --color-bg-highlight: rgba(0, 0, 0, 0.6);
  
    --color-text-primary: #cccccc;
    --color-text-highlight: #f0a500;
    --color-border: #444444;
  
    --color-success: #4caf50;
    --color-error: #f44336;
    --color-warning: #f1c40f;
    --color-info: #3498db;
  }
  
  /* Dark Theme */
  .theme-dark {
    --color-bg-primary: #1e1e1e;
    --color-bg-secondary: #2c2f38;
    --color-bg-highlight: rgba(0, 0, 0, 0.6);
  
    --color-text-primary: #cccccc;
    --color-text-highlight: #f0a500;
    --color-border: #444444;
  
    --color-success: #4caf50;
    --color-error: #f44336;
    --color-warning: #f1c40f;
    --color-info: #3498db;
  }