/* ==========================================================================
   CHAT-FREE — THEMES & CSS VARIABLES (variables.css)
   ========================================================================== */

:root, [data-theme="dark"] {
  --bg-canvas: #000000;
  --bg-canvas-fade: rgba(0, 0, 0, 0.85);
  --bg-sidebar: #09090b;
  --bg-sidebar-hover: #141417;
  --bg-card: #141417;
  --bg-input: #141417;
  --bg-header: rgba(0, 0, 0, 0.75);
  --bg-user-bubble: #202024;
  --bg-modal: #0e0e11;
  --bg-modal-rail: #141417;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-focus: rgba(255, 255, 255, 0.35);
  
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --text-inverse: #000000;
  --bg-main: #000000;
  
  --accent-white: #ffffff;
  --accent-cyan: #00e5ff;
  --accent-pink: #ec4899;
  --accent-purple: #c084fc;
  --danger: #ef4444;
  --success: #22c55e;
  
  --btn-send-bg: #ffffff;
  --btn-send-color: #000000;
  --btn-sidebar-bg: #1c1c20;
  --btn-sidebar-hover: #25252a;
  --chip-bg: #161619;
  --chip-hover: #202024;
  --chip-text: #a1a1aa;
  --pill-bg: #18181b;
  --pill-hover: #202024;
  --bg-hover: #202024;
  
  --popover-bg: #18181b;
  --popover-border: rgba(255, 255, 255, 0.12);
  --popover-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
  
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.6);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.85);
  
  --code-bg: #141417;
  --code-block-bg: #111113;
  --code-header-bg: #1c1c20;
  --typing-card-bg: #141417;
  --spinner-color: #ffffff;
}

[data-theme="light"] {
  --bg-canvas: #ffffff;
  --bg-canvas-fade: rgba(255, 255, 255, 0.85);
  --bg-sidebar: #f8f9fa;
  --bg-sidebar-hover: #f1f2f5;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-header: rgba(255, 255, 255, 0.88);
  --bg-user-bubble: #f3f4f6;
  --bg-modal: #ffffff;
  --bg-modal-rail: #f9f9fb;
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-medium: rgba(0, 0, 0, 0.14);
  --border-focus: rgba(0, 0, 0, 0.45);
  
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --text-inverse: #ffffff;
  --bg-main: #ffffff;
  
  --accent-white: #000000;
  --accent-cyan: #0284c7;
  --accent-pink: #db2777;
  --accent-purple: #9333ea;
  --danger: #dc2626;
  --success: #16a34a;
  
  --btn-send-bg: #000000;
  --btn-send-color: #ffffff;
  --btn-sidebar-bg: #ffffff;
  --btn-sidebar-hover: #f1f2f5;
  --chip-bg: #f3f4f6;
  --chip-hover: #e5e7eb;
  --chip-text: #374151;
  --pill-bg: #f3f4f6;
  --pill-hover: #e5e7eb;
  --bg-hover: #e5e7eb;
  
  --popover-bg: #ffffff;
  --popover-border: rgba(0, 0, 0, 0.1);
  --popover-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.06);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.15);
  
  --code-bg: #f3f4f6;
  --code-block-bg: #f9f9fb;
  --code-header-bg: #e5e7eb;
  --typing-card-bg: #f9f9fb;
  --spinner-color: #111827;
}