:root {
    /* Primary Colors */
    --color-primary: #e94d8b;
    --color-primary-light: #ff5e9b;
    --color-primary-lighter: #fe9bc3;
    --color-primary-dark: #d43d7b;
    --color-primary-alpha: rgba(233, 77, 139, 0.8);
    --color-primary-alpha-light: rgba(233, 77, 139, 0.5);
    --color-primary-alpha-lighter: rgba(233, 77, 139, 0.15);
    
    /* Secondary Colors */
    --color-secondary: #0077B6;
    --color-secondary-light: #007BFF;
    --color-secondary-dark: #0056b3;
  
    /* Accent Colors */
    --color-accent: #ff0887;
    --color-accent-secondary: #930179;
    --color-accent-warning: #a22235;
    --color-accent-success: #1DA1F2;
  
    /* Neutral Colors */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-grey-light: #e0e0e0;
    --color-grey: #808080;
    --color-grey-dark: #4d4d4d;
  
    /* Background Colors (Dark Mode) */
    --color-bg-primary: #000000;
    --color-bg-secondary: #161616;
    --color-bg-tertiary: #222222;
    --color-bg-elevated: #242424;
    
    /* Text Colors (Dark Mode) */
    --color-text-primary: rgba(255, 255, 255, .85);
    --color-text-secondary: rgba(255, 255, 255, 0.85);
    --color-text-tertiary: rgba(255, 255, 255, 0.85);
    --color-text-disabled: rgba(255, 255, 255, 0.4);
    --color-text-subtle: rgba(255, 255, 255, 0.4);
    
    /* UI Elements (Dark Mode) */
    --color-ui-border: rgba(255, 255, 255, 0.1);
    --color-ui-hover: rgba(255, 255, 255, 0.1);
    --color-ui-active: rgba(255, 255, 255, 0.15);
    --color-ui-disabled: rgba(255, 255, 255, 0.05);
    
    /* Overlays (Dark Mode) */
    --color-overlay-light: rgba(0, 0, 0, 0.2);
    --color-overlay-medium: rgba(0, 0, 0, 0.5);
    --color-overlay-heavy: rgba(0, 0, 0, 0.7);
    --color-overlay-opaque: rgba(0, 0, 0, 0.8);
    
    /* Status Colors */
    --color-error: #ff4444;
    --color-error-dark: #cc0000;
    --color-warning: #FFAA00;
    --color-success: #4CAF50;
    --color-info: #2196F3;
  }
  
  /* Light mode overrides */
  @media (prefers-color-scheme: light) {
    :root {
      /* Background Colors (Light Mode) */
      --color-bg-primary: #f8f9fa;
      --color-bg-secondary: #ffffff;
      --color-bg-tertiary: #f1f3f5;
      --color-bg-elevated: #e9ecef;
      
      /* Text Colors (Light Mode) */
      --color-text-primary: rgba(0, 0, 0, 0.9);
      --color-text-secondary: rgba(0, 0, 0, 0.75);
      --color-text-tertiary: rgba(0, 0, 0, 0.6);
      --color-text-disabled: rgba(0, 0, 0, 0.4);
      --color-text-subtle: rgba(0, 0, 0, 0.3);
      
      /* UI Elements (Light Mode) */
      --color-ui-border: rgba(0, 0, 0, 0.1);
      --color-ui-hover: rgba(0, 0, 0, 0.05);
      --color-ui-active: rgba(0, 0, 0, 0.1);
      --color-ui-disabled: rgba(0, 0, 0, 0.03);
      
      /* Overlays (Light Mode) */
      --color-overlay-light: rgba(255, 255, 255, 0.5);
      --color-overlay-medium: rgba(255, 255, 255, 0.7);
      --color-overlay-heavy: rgba(255, 255, 255, 0.8);
      --color-overlay-opaque: rgba(255, 255, 255, 0.9);
    }
  }
  
  /* Manual dark mode class for forced dark mode regardless of system setting */
  .dark-mode {
    /* Background Colors (Dark Mode) */
    --color-bg-primary: #000000;
    --color-bg-secondary: #161616;
    --color-bg-tertiary: #222222;
    --color-bg-elevated: #242424;
    
    /* Text Colors (Dark Mode) */
    --color-text-primary: rgba(255, 255, 255, 0.85);
    --color-text-secondary: rgba(255, 255, 255, 0.85);
    --color-text-tertiary: rgba(255, 255, 255, 0.85);
    --color-text-disabled: rgba(255, 255, 255, 0.4);
    --color-text-subtle: rgba(255, 255, 255, 0.4);
    
    /* UI Elements (Dark Mode) */
    --color-ui-border: rgba(255, 255, 255, 0.1);
    --color-ui-hover: rgba(255, 255, 255, 0.1);
    --color-ui-active: rgba(255, 255, 255, 0.15);
    --color-ui-disabled: rgba(255, 255, 255, 0.05);
    
    /* Overlays (Dark Mode) */
    --color-overlay-light: rgba(0, 0, 0, 0.2);
    --color-overlay-medium: rgba(0, 0, 0, 0.5);
    --color-overlay-heavy: rgba(0, 0, 0, 0.7);
    --color-overlay-opaque: rgba(0, 0, 0, 0.8);
  }
  
  /* Manual light mode class for forced light mode regardless of system setting */
  .light-mode {
    /* Background Colors (Light Mode) */
    --color-bg-primary: #f8f9fa;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #f1f3f5;
    --color-bg-elevated: #e9ecef;
    
    /* Text Colors (Light Mode) */
    --color-text-primary: rgba(0, 0, 0, 0.9);
    --color-text-secondary: rgba(0, 0, 0, 0.75);
    --color-text-tertiary: rgba(0, 0, 0, 0.6);
    --color-text-disabled: rgba(0, 0, 0, 0.4);
    --color-text-subtle: rgba(0, 0, 0, 0.3);
    
    /* UI Elements (Light Mode) */
    --color-ui-border: rgba(0, 0, 0, 0.1);
    --color-ui-hover: rgba(0, 0, 0, 0.05);
    --color-ui-active: rgba(0, 0, 0, 0.1);
    --color-ui-disabled: rgba(0, 0, 0, 0.03);
    
    /* Overlays (Light Mode) */
    --color-overlay-light: rgba(255, 255, 255, 0.5);
    --color-overlay-medium: rgba(255, 255, 255, 0.7);
    --color-overlay-heavy: rgba(255, 255, 255, 0.8);
    --color-overlay-opaque: rgba(255, 255, 255, 0.9);
  }