:root {
  
  --bg-app:             #08080f;
  --bg-sidebar:         #0c0c18;
  --bg-chat:            #08080f;
  --bg-surface:         #12122200;
  --bg-surface-solid:   #141425;
  --bg-surface-hover:   #1a1a32;
  --bg-surface-active:  #201e3a;
  --bg-glass:           rgba(255, 255, 255, 0.025);
  --bg-glass-hover:     rgba(255, 255, 255, 0.05);
  --bg-input:           rgba(255, 255, 255, 0.04);
  --bg-input-focus:     rgba(255, 255, 255, 0.07);

  
  --accent:             #8b5cf6;
  --accent-hover:       #7c3aed;
  --accent-light:       #a78bfa;
  --accent-muted:       rgba(139, 92, 246, 0.15);
  --accent-secondary:   #22d3ee;
  --accent-gradient:    linear-gradient(135deg, #7c3aed, #4f46e5);
  --sent-gradient:      linear-gradient(135deg, #6d28d9, #4338ca);
  --badge-gradient:     linear-gradient(135deg, #8b5cf6, #06b6d4);

  
  --online:             #22c55e;
  --online-glow:        rgba(34, 197, 94, 0.4);
  --offline:            #64748b;

  
  --text-primary:       #f1f5f9;
  --text-secondary:     #94a3b8;
  --text-muted:         #64748b;
  --text-inverse:       #ffffff;
  --text-accent:        #a78bfa;
  --text-link:          #38bdf8;

  
  --border:             rgba(255, 255, 255, 0.06);
  --border-hover:       rgba(255, 255, 255, 0.1);
  --border-subtle:      rgba(255, 255, 255, 0.04);
  --border-accent:      rgba(139, 92, 246, 0.3);

  
  --text:               #f1f5f9;
  --bg-hover:           rgba(255, 255, 255, 0.05);
  --danger:             #ef4444;

  
  --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:          0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:          0 8px 40px rgba(0, 0, 0, 0.6);
  --shadow-glow:        0 0 24px rgba(139, 92, 246, 0.12);
  --shadow-glow-strong: 0 0 40px rgba(139, 92, 246, 0.25);

  
  --font-family:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-xs:            0.6875rem;   
  --font-sm:            0.8125rem;   
  --font-base:          0.9375rem;   
  --font-lg:            1.0625rem;   
  --font-xl:            1.25rem;     
  --font-2xl:           1.5rem;      
  --fw-normal:          400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;
  --line-height:        1.5;

  
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 50%;

  
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:       150ms var(--ease-out);
  --t-base:       250ms var(--ease-out);
  --t-slow:       400ms var(--ease-out);

  
  --sidebar-w:    380px;
  --header-h:     64px;
  --input-h:      72px;
  --avatar-sm:    36px;
  --avatar-md:    44px;
  --avatar-lg:    48px;
}

[data-theme="light"] {
  --bg-app:             #f8f9fc;
  --bg-sidebar:         #ffffff;
  --bg-chat:            #f0f2f5;
  --bg-surface:         rgba(0, 0, 0, 0.02);
  --bg-surface-solid:   #ffffff;
  --bg-surface-hover:   #f0f2f5;
  --bg-surface-active:  #e8eaf0;
  --bg-glass:           rgba(0, 0, 0, 0.02);
  --bg-glass-hover:     rgba(0, 0, 0, 0.04);
  --bg-input:           rgba(0, 0, 0, 0.04);
  --bg-input-focus:     rgba(0, 0, 0, 0.06);

  --accent:             #7c3aed;
  --accent-hover:       #6d28d9;
  --accent-light:       #7c3aed;
  --accent-muted:       rgba(124, 58, 237, 0.1);

  --text-primary:       #1e293b;
  --text-secondary:     #475569;
  --text-muted:         #94a3b8;
  --text-inverse:       #ffffff;
  --text-accent:        #7c3aed;
  --text-link:          #2563eb;

  --border:             rgba(0, 0, 0, 0.08);
  --border-hover:       rgba(0, 0, 0, 0.12);
  --border-subtle:      rgba(0, 0, 0, 0.05);
  --border-accent:      rgba(124, 58, 237, 0.25);

  --text:               #1e293b;
  --bg-hover:           rgba(0, 0, 0, 0.04);
  --danger:             #dc2626;

  --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:          0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg:          0 8px 40px rgba(0, 0, 0, 0.12);
  --shadow-glow:        0 0 24px rgba(124, 58, 237, 0.08);
  --shadow-glow-strong: 0 0 40px rgba(124, 58, 237, 0.15);

  --sent-gradient:      linear-gradient(135deg, #7c3aed, #6366f1);
}