/* =============================================================================
   ROOT VARIABLES - Centralized Color & Design System
   ============================================================================= */

:root {
    /* =============================================================================
       PRIMARY BRAND COLORS
       ============================================================================= */
    --primary-color: #E83330; 
    --primary-color-low: rgba(232, 51, 48, 0.5);
    --primary-color-dark: #B02A24;

    --secondary-color: #adb5bd; 
    --secondary-color-low: rgba(173, 181, 189, 0.5);
    --secondary-color-dark: #6c757d;

    /* =============================================================================
       WHATSAPP BRAND COLORS
       ============================================================================= */
    --whatsapp-primary: #25D366;
    --whatsapp-primary-dark: #1ea854;
    --whatsapp-primary-light: rgba(37, 211, 102, 0.1);
    --whatsapp-primary-hover: rgba(37, 211, 102, 0.08);
    --whatsapp-border: rgba(37, 211, 102, 0.2);
    --whatsapp-border-hover: rgba(37, 211, 102, 0.3);

    /* =============================================================================
       STATUS COLORS - WhatsApp Connection States
       ============================================================================= */
    --status-connected: #25D366;
    --status-connected-bg: rgba(37, 211, 102, 0.1);
    --status-connected-hover: rgba(37, 211, 102, 0.2);
    
    --status-disconnected: #E53E3E;
    --status-disconnected-bg: rgba(229, 62, 62, 0.1);
    --status-disconnected-hover: rgba(229, 62, 62, 0.2);
    
    --status-pending: #FFA500;
    --status-pending-bg: rgba(255, 165, 0, 0.1);
    --status-pending-hover: rgba(255, 165, 0, 0.2);
    
    --status-loading: #3182CE;
    --status-loading-bg: rgba(49, 130, 206, 0.1);
    --status-loading-hover: rgba(49, 130, 206, 0.2);

    /* =============================================================================
       SEMANTIC COLORS - Actions & States
       ============================================================================= */
    --success: #4CAF50;
    --success-bg: rgba(76, 175, 80, 0.1);
    --success-hover: rgba(76, 175, 80, 0.2);
    
    --warning: #FF9800;
    --warning-bg: rgba(255, 152, 0, 0.1);
    --warning-hover: rgba(255, 152, 0, 0.2);
    
    --error: #F44336;
    --error-bg: rgba(244, 67, 54, 0.1);
    --error-hover: rgba(244, 67, 54, 0.2);
    
    --info: #2196F3;
    --info-bg: rgba(33, 150, 243, 0.1);
    --info-hover: rgba(33, 150, 243, 0.2);

    /* =============================================================================
       CHAT & LABEL COLORS
       ============================================================================= */
    --chat-label-work: #25D366;
    --chat-label-work-bg: rgba(37, 211, 102, 0.1);
    
    --chat-label-personal: #E74C3C;
    --chat-label-personal-bg: rgba(231, 76, 60, 0.1);
    
    --chat-label-important: #9B59B6;
    --chat-label-important-bg: rgba(155, 89, 182, 0.1);
    
    --chat-label-reminder: #F39C12;
    --chat-label-reminder-bg: rgba(255, 230, 109, 0.2);

    /* =============================================================================
       USER STATUS COLORS
       ============================================================================= */
    --user-online: var(--status-connected);
    --user-offline: var(--text-secondary);
    --user-away: var(--status-pending);
    --user-busy: var(--status-disconnected);

    /* =============================================================================
       BACKGROUND COLORS
       ============================================================================= */
    --bg-color: #e7e7e7;
    --bg-color-low: rgba(248, 249, 250, 0.5);
    --bg-color-dark: #57687d;
    --bg-secondary: #fcfcfc;
    --bg-tertiary: #f8f9fa;
    
    --card-bg: #fcfcfc;
    --card-bg-low: #f3f2f2;
    --card-border: rgba(0, 0, 0, 0.06);
    --card-hover: rgba(0, 0, 0, 0.02);

    /* =============================================================================
       TEXT COLORS
       ============================================================================= */
    --text-primary: #343a40;
    --text-secondary: #6c757d;
    --text-inverse: #ffffff;
    --text-dark: #343a40;
    --text-dark-low: #495057b9;
    --text-dark-dark: #212529;
    --text-light: #f8f9fa;
    --text-light-low: rgba(248, 249, 250, 0.7);
    --text-light-dark: #e1e4e6;

    /* =============================================================================
       BUTTON & INTERACTIVE COLORS
       ============================================================================= */
    --btn-default: rgba(0, 0, 0, 0.06);
    --btn-default-hover: rgba(0, 0, 0, 0.1);
    --btn-success: var(--status-connected-bg);
    --btn-success-hover: var(--status-connected-hover);
    --btn-warning: var(--status-pending-bg);
    --btn-warning-hover: var(--status-pending-hover);
    --btn-danger: var(--status-disconnected-bg);
    --btn-danger-hover: var(--status-disconnected-hover);

    /* =============================================================================
       BORDER & SEPARATOR COLORS
       ============================================================================= */
    --border-light: rgba(0, 0, 0, 0.05);
    --border-medium: rgba(0, 0, 0, 0.08);
    --border-dark: rgba(0, 0, 0, 0.1);
    --divider: rgba(0, 0, 0, 0.08);

    /* =============================================================================
       SHADOW & OVERLAY COLORS
       ============================================================================= */
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-dark: rgba(0, 0, 0, 0.2);
    --overlay-light: rgba(0, 0, 0, 0.02);
    --overlay-medium: rgba(0, 0, 0, 0.05);
    --backdrop: rgba(0, 0, 0, 0.15);

    /* =============================================================================
       SCROLLBAR COLORS
       ============================================================================= */
    --scrollbar-thumb: var(--shadow-medium);
    --scrollbar-thumb-hover: var(--shadow-dark);
    --scrollbar-track: transparent;

    /* =============================================================================
       DEPRECATED ALIASES (Keep for backward compatibility)
       ============================================================================= */
    --status-green: var(--status-connected);
    --status-orange: var(--status-pending);
    --status-gray: var(--text-secondary);
    --status-red: var(--status-disconnected);
    --info-error: var(--error);
    --info-warning: var(--warning);
    --info-success: var(--success);
    --info-info: var(--info);
    --smoothline-color: var(--bg-color);

    /* =============================================================================
       SPACING & SIZE VARIABLES
       ============================================================================= */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;

    /* =============================================================================
       TEXT SIZE VARIABLES
       ============================================================================= */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;

    /* =============================================================================
       BORDER RADIUS VARIABLES
       ============================================================================= */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    /* =============================================================================
       Z-INDEX LEVELS
       ============================================================================= */
    --z-dropdown: 1060;
    --z-backdrop: 1050;
    --z-navbar: 1999;
    --z-modal: 2000;
}