:root {
  --bg-body: #f0f2f5;
  --bg-container: #ffffff;
  --bg-profile: #f0f2f5;
  --bg-item-hover: #f2f2f2;
  --text-sub: #65676b;
  --icon-color: #2688eb;
  --line-color: #8366561f;
  --badge-bg: #99a2ad;
  --badge-text: #fff;
  --badge-green-bg: #2fb675;
  --badge-green-text: #ffffff;
  
  --bg-main: #f0f2f5;
  --bg-card: #ffffff;
  --bg-input: #ebedf0;
  --bg-hover: #f0f2f5;
  
  --text-main: #050505;
  --text-secondary: #828282;
  --text-sub: #65676b;
  
  --blue-action: #2688eb;
  --online-color: #4caf50;
  
  --shadow-main: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-tab: 0 2px 8px rgba(0, 0, 0, 0.08);

  --text-secondary: #828282;
  --blue-action: #2688eb;
  --hover-color: #f0f2f5;
  --text-muted: #6b7280;
  
  --section: #fff;
  --section-title: #111827;
  --section-menu: #e5e7eb;
  --color_surface: #fff;
  --logo-color: #2688eb;
}

body.dark-mode {
  --bg-body: #0a0a0a;
  --bg-container: #19191a;
  --bg-profile: #2c2d2e;
  --bg-item-hover: #2d2d2e;
  --text-sub: #76787a;
  --icon-color: #529ef4;
  --line-color: #8366561f;
  --badge-bg: #76787a;
  --badge-text: #fff;
  --badge-green-bg: #1e7a4d;
  
  --bg-main: #0a0a0a;
  --bg-card: #19191a;
  --bg-input: #222223;
  --bg-hover: #2d2d2e;
  
  --text-main: #e1e3e6;
  --text-secondary: #76787a;
  --text-sub: #a8abb0;
  
  --shadow-main: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-tab: 0 4px 12px rgba(0, 0, 0, 0.3);
  
  --text-secondary: #76787a;
  --hover-color: #2d2d2e;
  --text-muted: #6b7280;
  
  --section: #19191a;
  --section-title: #e1e3e6;
  --section-menu: #19191a;
  --color_surface: #19191a;
  --logo-color: #2688eb;
}