:root {
  /* Layout */
  --topbar-height: 52px;
  --chatbar-height: 68px;
  --chat-panel-width: 340px;
  --moment-panel-width: 380px;
  --moment-panel-min: 280px;
  --moment-panel-max: 600px;

  /* Colors — Base (dark theme default) */
  --bg-primary: #0f172a;
  --bg-secondary: rgba(15, 23, 42, 0.85);
  --bg-panel: rgba(15, 23, 42, 0.5);
  --bg-input: rgba(30, 41, 59, 0.75);
  --border-subtle: rgba(71, 85, 105, 0.15);
  --border-input: rgba(71, 85, 105, 0.25);
  --border-accent: rgba(99, 102, 241, 0.15);

  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-dimmed: #475569;

  --accent-primary: #6366f1;
  --accent-secondary: #8b5cf6;
  --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);

  /* Utility */
  --bg-hover: rgba(51, 65, 85, 0.3);
  --bg-card: rgba(30, 41, 59, 0.5);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);

  /* Blur */
  --blur-panel: blur(16px);
  --blur-bar: blur(20px);

  /* Transitions */
  --transition-panel: width 0.3s ease, opacity 0.3s ease;
  --transition-fast: all 0.15s ease;
  --transition-normal: all 0.2s ease;
}

:root.light {
  /* Colors — Light theme (warm/cream) */
  --bg-primary: #faf8f5;
  --bg-secondary: rgba(245, 240, 235, 0.85);
  --bg-panel: rgba(255, 252, 248, 0.85);
  --bg-input: rgba(235, 228, 218, 0.75);
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-input: rgba(0, 0, 0, 0.12);
  --border-accent: rgba(99, 102, 241, 0.2);

  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-dimmed: #94a3b8;

  /* Accent colors stay the same */
  --accent-primary: #6366f1;
  --accent-secondary: #8b5cf6;
  --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);

  /* Utility */
  --bg-hover: rgba(0, 0, 0, 0.05);
  --bg-card: rgba(255, 255, 255, 0.7);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);

  /* Adjusted blur for light backgrounds */
  --blur-panel: blur(12px);
  --blur-bar: blur(16px);
}