/* ########################################### */
/*           CSS Color Variables               */
/* ########################################### */

:root {
    /* Primary Colors */
    --primary-purple: #1acee5;
    --primary-purple-light: #6bdaff;
    --primary-purple-dark: #1632d0;
    
    /* Secondary Colors */
    --secondary-purple: #0678b6;
    --secondary-purple-light: #9af0ff;
    --secondary-purple-dark: #3356d6;
    
    /* Accent Colors */
    --accent-pink: #ff0042;
    --accent-pink-light: #ff3366;
    --accent-pink-dark: #cc0033;
    
    /* Background Colors */
    --bg-black: #000000;
    --bg-dark: #0e0e0f;
    --bg-darker: #0a0a0a;
    --bg-gray: #131415;
    --bg-gray-light: #1a1a1a;
    --bg-gray-lighter: #222222;
    --bg-trans-sidebar: rgba(44, 126, 220, 0.175);
    
    /* Text Colors */
    --text-white: #ffffff;
    --text-light: #e0e0e0;
    --text-gray: #cccccc;
    --text-dark: #888888;
    --text-darker: #666666;
    
    /* Border Colors */
    --border-purple: #05367b;
    --border-purple-light: #2c55dc;
    --border-transparent: rgba(13, 26, 145, 0.366);
    --border-gray: #333333;
    --border-gray-light: #444444;
    
    /* Link Colors */
    --link-purple: #49a5f0;
    --link-purple-hover: #7181c8;
    --link-purple-active: #4147f9;
    
    /* Button Colors */
    --btn-primary: #52057b;
    --btn-primary-hover: #892cdc;
    --btn-primary-active: #3a0a5a;
    --btn-secondary: #333333;
    --btn-secondary-hover: #444444;
    
    /* Status Colors */
    --status-online: #2ed573;
    --status-offline: #ff4757;
    --status-away: #ffa502;
    --status-busy: #ff6348;
    
    /* Notification Colors */
    --notification-success: #2ed573;
    --notification-error: #ff4757;
    --notification-warning: #ffa502;
    --notification-info: #1e90ff;
    
    /* Gradient Colors */
    --gradient-purple: linear-gradient(135deg, #049ac8, #00eaff);
    --gradient-purple-light: linear-gradient(135deg, #7fabe9, #496af0);
    --gradient-dark: linear-gradient(135deg, #131415, #1a1a1a);
    
    /* Shadow Colors */
    --shadow-purple: rgba(5, 31, 123, 0.3);
    --shadow-purple-light: rgba(44, 109, 220, 0.2);
    --shadow-dark: rgba(0, 0, 0, 0.3);
    
    /* Hover/Focus States */
    --hover-purple: rgba(5, 42, 123, 0.1);
    --hover-purple-light: rgba(44, 138, 220, 0.1);
    --focus-purple: rgba(5, 107, 123, 0.2);
    
    /* Opacity Values */
    --opacity-light: 0.7;
    --opacity-medium: 0.5;
    --opacity-dark: 0.3;
    
    /* Transition Values */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
}