:root {
  /* ===== CHATVSU DESIGN SYSTEM — Soft & Welcoming ===== */

  /* Core Palette — Softer greens, warm neutrals */
  --accent: #34d399;
  --accent-dark: #10b981;
  --accent-muted: rgba(52, 211, 153, 0.10);
  --accent-subtle: rgba(52, 211, 153, 0.05);
  --danger: #f87171;
  --warning: #fbbf24;

  /* Dark Mode (Default) — Sophisticated Dark Green */
  --bg-app: #0a110d;
  --bg-surface: #111a15;
  --bg-surface-hover: #16241d;
  --bg-elevated: #1a2a22;
  --bg-sidebar: #0a110d;
  --bg-sidebar-glass: rgba(10, 17, 13, 0.75);

  --text-primary: #e8ecf4;
  --text-secondary: #8892a4;
  --text-muted: #525c6e;

  --border-color: rgba(255, 255, 255, 0.06);
  --border-subtle: rgba(255, 255, 255, 0.03);
  --primary-color: var(--accent);
  --primary-hover: var(--accent-dark);

  /* Spacing Scale (4px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;
  --sp-10: 4rem;

  /* Border Radius — Gentle, friendly */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Shadows — Soft & subtle */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.22);
  --shadow-xl: 0 16px 44px rgba(0, 0, 0, 0.28);

  /* Chat Specific — Soft, muted tones */
  --chat-bubble-me: #1a3a2e;
  --chat-bubble-them: #1e2433;
  --chat-text-me: #e0f5ec;
  --chat-text-them: #e8ecf4;
}

[data-theme="light"] {
  --bg-app: #f4f6f9;
  --bg-surface: #ffffff;
  --bg-surface-hover: #f0f2f5;
  --bg-elevated: #ffffff;
  --bg-sidebar: #ffffff;
  --bg-sidebar-glass: rgba(255, 255, 255, 0.75);

  --text-primary: #1a1f2e;
  --text-secondary: #5f6b7a;
  --text-muted: #9ca3af;

  --border-color: rgba(0, 0, 0, 0.06);
  --border-subtle: rgba(0, 0, 0, 0.03);

  --chat-bubble-me: #d1fae5;
  --chat-bubble-them: #f0f2f5;
  --chat-text-me: #064e3b;
  --chat-text-them: #1a1f2e;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 16px 44px rgba(0, 0, 0, 0.1);
}