/* ========================================== Design Tokens / Theme Variables ========================================== */ /* Default (Dark Theme) */ :root { --bg-primary: #0a0a0f; --bg-secondary: #12121a; --bg-card: #1a1a24; --bg-card-hover: #22222e; --bg-input: #16161f; --accent-cyan: #00d4ff; --accent-purple: #a855f7; --accent-green: #10b981; --accent-orange: #f59e0b; --accent-red: #ef4444; --text-primary: #f0f0f5; --text-secondary: #8888a0; --text-muted: #555566; --border-color: #2a2a3a; --border-glow: rgba(0, 212, 255, 0.3); } /* ========================================== Light Theme Overrides Apply by adding class "light-theme" to root element (обычно или ) ========================================== */ .light-theme { --bg-primary: #f5f5f7; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f0f0f2; --bg-input: #f5f5f7; --text-primary: #1a1a2e; --text-secondary: #666680; --text-muted: #999999; --border-color: #e0e0e5; --border-glow: rgba(0, 150, 200, 0.2); } /* Light theme component overrides */ .light-theme .card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .light-theme .message.outgoing .message-bubble { background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(168, 85, 247, 0.2)); } .light-theme .chat-header, .light-theme .chat-input-area { background: var(--bg-secondary); }