:root, [data-theme="light"] {
  --bg-color: #f8fafc;
  --surface: #ffffff;
  --ep-bg-light: #ffffff;
  --ep-bg-dark: #f1f5f9;
  --ep-accent: #0284c7;
  --accent-color: var(--ep-accent);
  --ep-gray: #64748b;
  --ep-divider-light: #e2e8f0;
  --ep-divider-dark: rgba(255, 255, 255, 0.1);
  --ep-search-bg-light: #e2e8f0;
  --ep-search-bg-dark: #1e293b;
  
  --text-color: #0f172a;
  --text-dim: #64748b;
  --wall1: #E4EBEF;
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass: var(--glass-bg);
  --glass-border: rgba(255, 255, 255, 0.4);
  
  --chat-bg-grad-1: #E4EBEF;
  --chat-bg-grad-2: #D1D9E0;

  --bg: var(--bg-color);
  --fg: var(--text-color);
  --glass2: var(--surface);
  --line: var(--ep-divider-light);
  --muted: var(--text-dim);
  --accent: var(--accent-color);
  --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow2: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --radius: 12px;
  --radius3: 16px;
}

[data-theme="dark"], .dark, body.dark {
  --bg-color: #0f172a;
  --surface: #1e293b;
  --ep-bg-light: #1e293b;
  --ep-bg-dark: #0f172a;
  --ep-accent: #38bdf8;
  --accent-color: var(--ep-accent);
  --ep-gray: #94a3b8;
  --ep-divider-light: #334155;
  --ep-search-bg-light: #334155;
  
  --text-color: #f8fafc;
  --text-dim: #94a3b8;
  --wall1: #17212B;
  --glass-bg: rgba(30, 41, 59, 0.75);
  --glass: var(--glass-bg);
  --glass-border: rgba(255, 255, 255, 0.05);

  --chat-bg-grad-1: #17212B;
  --chat-bg-grad-2: #0E1621;


  --bg: var(--bg-color);
  --fg: var(--text-color);
  --glass2: var(--surface);
  --line: var(--ep-divider-light);
  --muted: var(--text-dim);
  --accent: var(--accent-color);
  --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --shadow2: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}