:root {
    --color-bg: #F8F9FA;
    --color-surface: #EEF0F2;
    --color-text: #2D3748;
  
    --color-primary: #4A6FA5;
    --color-primary-hover: #3D5D8A;
    --color-primary-disabled: rgba(74, 111, 165, 0.3);
  
    --color-secondary: #4A6FA5;
    --color-secondary-hover: #3D5D8A;
    --color-secondary-disabled: rgba(74, 111, 165, 0.35);
    --color-secondary-rgb: 74, 111, 165;
  
    --color-red: #C53030;
    --color-red-hover: #E2B6B6;
    --color-red-disabled: #F5D5D5;
  
    --color-secondary-red: #C53030;
    --color-secondary-red-hover: #9B2C2C;
    --color-secondary-red-disabled: #E2B6B6;
  
    --color-gray: #718096;
    --color-gray-hover: #4A5568;
    --color-gray-disabled: #CBD5E0;

    --color-medium-gray: #E2E8F0;
    --color-medium-gray-hover: #CBD5E0;
    --color-medium-gray-disabled: rgba(226, 232, 240, 0.5);

    --color-highlight-gray: #F7FAFC;
    --color-highlight-gray-hover: #EDF2F7;
    --color-highlight-gray-disabled: rgba(247, 250, 252, 0.5);

    --color-success: #38A169;
    --color-success-hover: #2F855A;
    --color-success-disabled: #C6F6D5;

    --color-text-primary: #2D3748;
  
    --font-family: "DM Sans", sans-serif;
    --object-radius-large: 10px;
    --object-radius-medium: 8px;
    --object-radius-small: 4px;
  }

  /* ============================================== */
  /* LIGHT THEME                                    */
  /* ============================================== */
  :root, .light-theme {
    /* Background colors */
    --bg-primary: #ffffff;
    --bg-secondary: #F7FAFC;
    --bg-dark: #EDF2F7;
    
    /* Surface colors */
    --surface-color: #F7FAFC;
    --surface-dark: #EDF2F7;
    
    /* Text colors */
    --text-primary: #1A202C;
    --text-secondary: #4A5568;
    --text-tertiary: #718096;
    --text-primary-dark: #1A202C;
    --text-secondary-dark: #4A5568;
    --text-tertiary-dark: #718096;
    
    /* Border colors */
    --border-color: #E2E8F0;
    --border-dark: #CBD5E0;
    
    /* Primary accent color */
    --primary-color: #4A6FA5;
    --primary-color-dark: #3D5D8A;
    --primary-color-light: rgba(74, 111, 165, 0.15);
    --primary-light: rgba(74, 111, 165, 0.1);
    --primary-dark-bg: rgba(74, 111, 165, 0.06);
    
    /* Hover backgrounds */
    --hover-bg: rgba(0, 0, 0, 0.03);
    --hover-bg-dark: rgba(0, 0, 0, 0.05);
    
    /* Error color */
    --error-color: #C53030;

    /* Legacy aliases */
    --color-primary: var(--primary-color);
    --color-primary-hover: var(--primary-color-dark);
    --color-primary-disabled: var(--primary-color-light);
    --color-border: var(--border-color);
    --bg-card: var(--bg-primary);
    --bg-input: #ffffff;
    --bg-hover: var(--hover-bg);
  }
  
  /* ============================================== */
  /* DARK THEME                                     */
  /* ============================================== */
  .dark-theme {
    --color-bg: #1A202C;
    --color-surface: #2D3748;
    --color-text: #E2E8F0;
  
    --color-primary: var(--primary-color);
    --color-primary-hover: var(--primary-color-dark);
    --color-primary-disabled: rgba(74, 111, 165, 0.35);
  
    --color-secondary: #5A8AC5;
    --color-secondary-hover: #4A7AB5;
    --color-secondary-disabled: #2C4A6E;
    --color-secondary-rgb: 90, 138, 197;
  
    --color-red: #FC8181;
    --color-red-hover: #FEB2B2;
    --color-red-disabled: #742A2A;
  
    --color-secondary-red: #FC8181;
    --color-secondary-red-hover: #FEB2B2;
    --color-secondary-red-disabled: #742A2A;
  
    --color-gray: #A0AEC0;
    --color-gray-hover: #CBD5E0;
    --color-gray-disabled: #4A5568;
    
    /* Background colors */
    --bg-primary: #1A202C;
    --bg-secondary: #2D3748;
    --bg-dark: #171923;
    
    /* Surface colors */
    --surface-color: #2D3748;
    --surface-dark: #1A202C;
    
    /* Text colors */
    --text-primary: #E2E8F0;
    --text-secondary: #A0AEC0;
    --text-tertiary: #718096;
    --text-primary-dark: #E2E8F0;
    --text-secondary-dark: #A0AEC0;
    --text-tertiary-dark: #718096;
    
    /* Border colors */
    --border-color: rgba(226, 232, 240, 0.12);
    --border-dark: rgba(226, 232, 240, 0.12);
    
    /* Primary accent color */
    --primary-color: #5A8AC5;
    --primary-color-dark: #4A7AB5;
    --primary-color-light: rgba(90, 138, 197, 0.3);
    --primary-light: #7BA7D7;
    --primary-dark-bg: rgba(90, 138, 197, 0.12);
    
    /* Hover backgrounds */
    --hover-bg: rgba(255, 255, 255, 0.05);
    --hover-bg-dark: rgba(255, 255, 255, 0.05);
    
    /* Error color */
    --error-color: #FC8181;

    --color-border: var(--border-color);
    --bg-card: #2D3748;
    --bg-input: #2D3748;
    --bg-hover: rgba(255, 255, 255, 0.06);
  }
