/* CSS переменные для темизации */
:root {
    /* Цвета фона */
    --background: hsl(222, 47%, 4%);
    --foreground: hsl(0, 0%, 100%);
    --card: hsl(222, 47%, 6%);
    --card-foreground: hsl(0, 0%, 100%);
    --popover: hsl(222, 47%, 8%);
    --popover-foreground: hsl(0, 0%, 100%);
    
    /* Основные цвета */
    --primary: hsl(252, 69%, 67%);
    --primary-foreground: hsl(0, 0%, 100%);
    --primary-hover: hsl(252, 69%, 60%);
    --primary-light: hsla(252, 69%, 67%, 0.12);
    --primary-light-hover: hsla(252, 69%, 67%, 0.22);
    
    /* Вторичные цвета */
    --secondary: hsl(222, 47%, 12%);
    --secondary-foreground: hsl(0, 0%, 100%);
    
    /* Приглушенные цвета */
    --muted: hsl(222, 47%, 15%);
    --muted-foreground: hsl(0, 0%, 70%);
    
    /* Акцент */
    --accent: hsl(252, 69%, 67%);
    --accent-foreground: hsl(0, 0%, 100%);
    
    /* Деструктивные действия */
    --destructive: hsl(0, 84%, 60%);
    --destructive-foreground: hsl(0, 0%, 100%);
    
    /* Границы */
    --border: hsla(0, 0%, 100%, 0.06);
    --input: hsl(222, 47%, 15%);
    --ring: hsl(252, 69%, 67%);
    
    /* Сообщения */
    --message-own: hsl(252, 69%, 60%);
    --message-other: hsl(222, 47%, 10%);
    --message-text-own: hsl(0, 0%, 100%);
    --message-text-other: hsl(0, 0%, 100%);
    
    /* Статусы */
    --online: hsl(142, 71%, 45%);
    --offline: hsl(0, 0%, 50%);
    --away: hsl(38, 92%, 50%);
    
    /* Сайдбар */
    --sidebar-bg: hsl(222, 47%, 3%);
    
    /* Эффекты */
    --glow-primary: 0 0 40px hsla(252, 69%, 67%, 0.28);
    --glow-soft: 0 0 60px hsla(252, 69%, 67%, 0.14);
    --shadow: 0 18px 45px hsla(222, 47%, 4%, 0.6);
    --shadow-lg: 0 24px 60px hsla(222, 47%, 4%, 0.9);
    
    /* Градиенты */
    --gradient-primary: linear-gradient(135deg, hsl(252, 69%, 60%), hsl(280, 70%, 65%));
    --gradient-bg: radial-gradient(ellipse at top, hsl(222, 47%, 8%) 0%, hsl(222, 47%, 4%) 50%, hsl(222, 47%, 2%) 100%);
    
    /* Анимации */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Радиус скругления */
    --radius: 1rem;
    --radius-sm: 0.5rem;
    --radius-lg: 1.5rem;
    
    /* Отступы */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Размеры */
    --header-height: 60px;
    --sidebar-width: 380px;
    --sidebar-width-mobile: 100%;

    /* Иконки и базовые токены */
    --icon-primary: rgba(255,255,255,0.88);
    --icon-secondary: rgba(255,255,255,0.55);
    --text-primary: hsl(0, 0%, 100%);
    --text-secondary: hsl(0, 0%, 70%);
    --bg: hsl(222, 47%, 4%);
    --icon-image-filter: invert(1) brightness(1.1);
}

:root[data-theme="dark"] {
    --icon-primary: rgba(255,255,255,0.88);
    --icon-secondary: rgba(255,255,255,0.55);
    --text-primary: hsl(0, 0%, 100%);
    --text-secondary: hsl(0, 0%, 70%);
    --bg: hsl(222, 47%, 4%);
    --card: hsl(222, 47%, 6%);
    --border: hsla(0, 0%, 100%, 0.06);
    --accent: hsl(252, 69%, 67%);
    --icon-image-filter: invert(1) brightness(1.1);
}

:root[data-theme="light"] {
    --icon-primary: rgba(0,0,0,0.82);
    --icon-secondary: rgba(0,0,0,0.55);
    --text-primary: hsl(222, 47%, 8%);
    --text-secondary: hsl(0, 0%, 45%);
    --bg: hsl(0, 0%, 96%);
    --card: hsl(0, 0%, 100%);
    --border: hsla(0, 0%, 0%, 0.08);
    --accent: hsl(252, 69%, 60%);
    --icon-image-filter: invert(0) brightness(0.4);
}