:root {
    /* Original color definitions */
    --color-bg: #F8F9FA;
    --color-surface: #EFEDE5;
    --color-text: #3A3A3A;
  
    --color-primary: #C7C5B2;
    --color-primary-hover: #D9D7C6;
    --color-primary-disabled: #E3E2D8;
  
    --color-secondary: #F25843;
    --color-secondary-hover: #FF6A55;
    --color-secondary-disabled: #F5B0A4;
  
    --color-red: #dc3545;
    --color-red-hover: #f5c6cb;
    --color-red-disabled: #f8d7da;
  
    --color-secondary-red: #B94A55;
    --color-secondary-red-hover: #D46872;
    --color-secondary-red-disabled: #E8B7BA;
  
    --color-gray: #6F7373;
    --color-gray-hover: #565A5A;
    --color-gray-disabled: #B7BBBA;

    --color-medium-gray: #E0DDD3;
    --color-medium-gray-hover: #D1CEC5;
    --color-medium-gray-disabled: #E0DDD380;

    --color-highlight-gray: #F5F3ED;
    --color-highlight-gray-hover: #E6E3DC;
    --color-highlight-gray-disabled: #F5F3ED80;
  
    --font-family: "DM Sans", sans-serif;
    --object-radius-large: 30px;
    --object-radius-medium: 15px;
    --object-radius-small: 5px;
  }

  /* ============================================== */
  /* LIGHT THEME                                    */
  /* ============================================== */
  :root, .light-theme {
    /* Background colors */
    --bg-primary: #ffffff;
    --bg-secondary: #F8F9FA;
    --bg-dark: #f5f5f5;
    
    /* Surface colors */
    --surface-color: #f8f9fa;
    --surface-dark: #f0f0f0;
    
    /* Text colors */
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --text-tertiary: #888888;
    --text-primary-dark: #1a1a1a;
    --text-secondary-dark: #666666;
    --text-tertiary-dark: #888888;
    
    /* Border colors */
    --border-color: #e0e0e0;
    --border-dark: #d0d0d0;
    
    /* Primary accent color */
    --primary-color: #F25843;
    --primary-color-dark: #D94A37;
    --primary-color-light: rgba(242, 88, 67, 0.2);
    --primary-light: rgba(242, 88, 67, 0.12);
    --primary-dark-bg: rgba(242, 88, 67, 0.08);
    
    /* Hover backgrounds */
    --hover-bg: rgba(0, 0, 0, 0.04);
    --hover-bg-dark: rgba(0, 0, 0, 0.06);
    
    /* Error color */
    --error-color: #dc2626;
  }
  
  /* ============================================== */
  /* DARK THEME                                     */
  /* ============================================== */
  .dark-theme {
    --color-bg: #181818;
    --color-surface: #1E1D1A;
    --color-text: #E5E7EB;
  
    --color-primary: #C7C5B2;
    --color-primary-hover: #E0DECC;
    --color-primary-disabled: #59584F;
  
    --color-secondary: #F25843;
    --color-secondary-hover: #FF715C;
    --color-secondary-disabled: #6E3E36;
  
    --color-red: #dc3545;
    --color-red-hover: #f5c6cb;
    --color-red-disabled: #f8d7da;
  
    --color-secondary-red: #D65D6A;
    --color-secondary-red-hover: #E17683;
    --color-secondary-red-disabled: #70363C;
  
    --color-gray: #181818;
    --color-gray-hover: #2E2E2E;
    --color-gray-disabled: #505050;
    
    /* Background colors */
    --bg-primary: #181818;
    --bg-secondary: #1E1D1A;
    --bg-dark: #0a0a0a;
    
    /* Surface colors */
    --surface-color: #1E1D1A;
    --surface-dark: #1a1a1a;
    
    /* Text colors */
    --text-primary: #E5E7EB;
    --text-secondary: #C7C5B2;
    --text-tertiary: #9CA3AF;
    --text-primary-dark: #E5E7EB;
    --text-secondary-dark: #C7C5B2;
    --text-tertiary-dark: #9CA3AF;
    
    /* Border colors */
    --border-color: rgba(199, 197, 178, 0.15);
    --border-dark: rgba(199, 197, 178, 0.15);
    
    /* Primary accent color */
    --primary-color: #F25843;
    --primary-color-dark: #D94A37;
    --primary-color-light: rgba(242, 88, 67, 0.3);
    --primary-light: #FF9A8A;  /* Lighter red for text on dark backgrounds */
    --primary-dark-bg: rgba(242, 88, 67, 0.15);  /* Semi-transparent red for backgrounds */
    
    /* Hover backgrounds */
    --hover-bg: rgba(255, 255, 255, 0.06);
    --hover-bg-dark: rgba(255, 255, 255, 0.06);
    
    /* Error color */
    --error-color: #ef4444;
  }
