/* Telegram-like Theme Variables */

:root {
  /* Light Theme (Default) */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #eeeeee;
  --bg-sidebar: #ffffff;
  --bg-chat: #e5ddd5;
  --bg-message-out: #dcf8c6;
  --bg-message-in: #ffffff;
  --bg-input: #ffffff;
  --bg-hover: #f0f0f0;
  --bg-active: #e3f2fd;
  --bg-modal: rgba(0, 0, 0, 0.5);
  
  --text-primary: #111111;
  --text-secondary: #666666;
  --text-muted: #999999;
  --text-link: #168acd;
  --text-inverse: #ffffff;
  
  --border-color: #e0e0e0;
  --border-light: #f0f0f0;
  --divider: #e0e0e0;
  
  --accent-primary: #3390ec;
  --accent-secondary: #2b7fd1;
  --accent-hover: #2b7fd1;
  --success: #4caf50;
  --warning: #ff9800;
  --error: #f44336;
  --online: #4caf50;
  --offline: #9e9e9e;
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-full: 50%;
  
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.35s ease;
  
  --sidebar-width: 360px;
  --sidebar-width-mobile: 100vw;
  --header-height: 60px;
  --input-height: 60px;
}

/* Dark Theme */
[data-theme="dark"] {
  --bg-primary: #0f1419;
  --bg-secondary: #17212b;
  --bg-tertiary: #1e2a36;
  --bg-sidebar: #17212b;
  --bg-chat: #0e1621;
  --bg-message-out: #2b5278;
  --bg-message-in: #182533;
  --bg-input: #17212b;
  --bg-hover: #1e2a36;
  --bg-active: #2b5278;
  --bg-modal: rgba(0, 0, 0, 0.7);
  
  --text-primary: #ffffff;
  --text-secondary: #aaaaaa;
  --text-muted: #7a8a99;
  --text-link: #6ab3f3;
  --text-inverse: #0f1419;
  
  --border-color: #0e1621;
  --border-light: #1e2a36;
  --divider: #0e1621;
  
  --accent-primary: #5c9ce6;
  --accent-secondary: #4a8fd9;
  --accent-hover: #6ab3f3;
}

/* System Preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: #0f1419;
    --bg-secondary: #17212b;
    --bg-tertiary: #1e2a36;
    --bg-sidebar: #17212b;
    --bg-chat: #0e1621;
    --bg-message-out: #2b5278;
    --bg-message-in: #182533;
    --bg-input: #17212b;
    --bg-hover: #1e2a36;
    --bg-active: #2b5278;
    --bg-modal: rgba(0, 0, 0, 0.7);
    
    --text-primary: #ffffff;
    --text-secondary: #aaaaaa;
    --text-muted: #7a8a99;
    --text-link: #6ab3f3;
    --text-inverse: #0f1419;
    
    --border-color: #0e1621;
    --border-light: #1e2a36;
    --divider: #0e1621;
    
    --accent-primary: #5c9ce6;
    --accent-secondary: #4a8fd9;
    --accent-hover: #6ab3f3;
  }
}

/* Accent Colors */
.accent-blue { --accent-hue: 207; }
.accent-green { --accent-hue: 145; }
.accent-orange { --accent-hue: 28; }
.accent-pink { --accent-hue: 340; }
.accent-purple { --accent-hue: 270; }
.accent-red { --accent-hue: 0; }