/**
 * Chat Main - CSS Variables
 * 색상, 폰트, 간격 등의 디자인 토큰 정의
 */

:root {
    /* Primary Colors */
    --chat-primary: rgba(0, 153, 226, 1);
    --chat-primary-hover: rgba(0, 123, 182, 1);
    --chat-primary-light: rgba(0, 153, 226, 0.1);
    --chat-primary-lighter: rgba(0, 153, 226, 0.05);
    --chat-primary-border: rgba(0, 153, 226, 0.35);
    
    /* Secondary Colors */
    --chat-secondary: #6b7280;
    --chat-secondary-hover: #4b5563;
    
    /* Text Colors */
    --chat-text-primary: #293b48;
    --chat-text-secondary: #8097a8;
    --chat-text-muted: #64748b;
    --chat-text-dark: #1f2937;
    --chat-text-light: #475569;
    
    /* Background Colors */
    --chat-bg-main: rgb(249, 250, 251);
    --chat-bg-white: #ffffff;
    --chat-bg-hover: #f8fafc;
    --chat-bg-active: rgba(224, 242, 255, 0.32);
    
    /* Border Colors */
    --chat-border: #d9d9d9;
    --chat-border-light: #e2e8f0;
    --chat-border-divider: #eceff3;
    
    /* Danger Colors */
    --chat-danger: #cf1d1c;
    --chat-danger-bg: rgba(207, 29, 28, 0.05);
    --chat-danger-light: #fee2e2;
    --chat-danger-text: #b91c1c;
    
    /* Shadow */
    --chat-shadow-sm: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
    --chat-shadow-md: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    --chat-shadow-lg: 0px 16px 40px rgba(15, 23, 42, 0.18);
    --chat-shadow-primary: 0px 4px 10px 0px rgba(0, 153, 226, 0.3);
    
    /* Border Radius */
    --chat-radius-sm: 5px;
    --chat-radius-md: 10px;
    --chat-radius-lg: 12px;
    --chat-radius-xl: 20px;
    --chat-radius-full: 40px;
    --chat-radius-pill: 999px;
    
    /* Font Family */
    --chat-font-regular: "Pretendard-Regular", sans-serif;
    --chat-font-medium: "Pretendard-Medium", sans-serif;
    --chat-font-semibold: "Pretendard-SemiBold", sans-serif;
    --chat-font-bold: "Pretendard-Bold", sans-serif;
    
    /* Font Sizes */
    --chat-font-xs: 12px;
    --chat-font-sm: 13px;
    --chat-font-base: 14px;
    --chat-font-md: 16px;
    --chat-font-lg: 18px;
    --chat-font-xl: 21px;
    --chat-font-2xl: 28px;
    --chat-font-3xl: 40px;
    
    /* Spacing */
    --chat-spacing-xs: 0.25rem;
    --chat-spacing-sm: 0.5rem;
    --chat-spacing-md: 0.75rem;
    --chat-spacing-base: 1rem;
    --chat-spacing-lg: 1.5rem;
    --chat-spacing-xl: 2rem;
    --chat-spacing-2xl: 2.25rem;
    
    /* Layout */
    --chat-max-width: 1035px;
    --chat-content-max-width: 1200px;
    --chat-sidebar-width: 256px;
    
    /* Z-Index */
    --chat-z-base: 1;
    --chat-z-dropdown: 100;
    --chat-z-sticky: 10;
    --chat-z-fixed: 1000;
    --chat-z-modal: 10000;
    
    /* Transitions */
    --chat-transition-fast: 0.2s ease;
    --chat-transition-base: 0.3s ease;
    --chat-transition-slow: 0.6s ease-in-out;
}