:root[data-theme="AnnA BG-Light"] {
  --chat-header-bg: rgba(255, 255, 255, 0.98);
  --chat-input-bg: rgba(255, 255, 255, 0.98);
  --chat-message-gradient-start: #d2cdff;
  --chat-message-gradient-end: #d2cdff;
  --text-primary-deemphisized: rgba(10, 10, 10, 0.5);
  --quoted-message-bg: rgb(246, 245, 244, 0.7);
  --bg-gradient-start: #f0f4ff;
  --bg-gradient-end: #e0e7ff;
  --card-bg: rgba(255, 255, 255, 0.98);
  --card-hover-shadow: rgba(0, 0, 0, 0.15);
  --text-primary: #1a202c;
  --text-secondary: #2d3748;
  --text-tertiary: #4a5568;
  --accent-gradient-start: #5b6fd8;
  --accent-gradient-end: #6b46a3;
  --weather-card-bg: rgba(255, 255, 255, 0.9);
  --weather-card-border: rgba(102, 126, 234, 0.15);
  --section-title-color: #1a202c;
  --date-color: #2d3748;
  --summary-color: #1a202c;
  --temp-unit-color: #4a5568;
  --divider-color: #cbd5e0;
  --error-bg: #fee;
  --error-border: #dc2626;
  --error-text: #991b1b;
  --skeleton-bg-1: #f0f0f0;
  --skeleton-bg-2: #e0e0e0;
  --tile-min-height: 120px;
  --tile-gap: 0.75rem;
  --cta-height: 3rem;
  --card-inner-gap: 1rem;
  --focus-color: #5b21b6;
  --input-bg: rgba(255, 255, 255, 0.7);
  --fab-safe-bottom: calc(56px + 24px + 16px);
  --select-bg: rgba(255, 255, 255, 0.95);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

:root[data-theme="AnnA BG-Dark"] {
  --chat-header-bg: #1d1e2f;
  --chat-input-bg: #1d1e2f;
  --chat-message-gradient-start: #7c92f5;
  --chat-message-gradient-end: #8b5ecf;
  --text-primary-deemphisized: rgba(255, 255, 255, 0.5);
  --quoted-message-bg: rgba(0, 0, 0, 0.2);
  --bg-gradient-start: #1a1a2e;
  --bg-gradient-end: #16213e;
  --card-bg: rgba(30, 30, 46, 0.95);
  --card-hover-shadow: rgba(0, 0, 0, 0.3);
  --text-primary: #ffffff;
  --text-secondary: #e2e8f0;
  --text-tertiary: #cbd5e0;
  --accent-gradient-start: #7c92f5;
  --accent-gradient-end: #8b5ecf;
  --weather-card-bg: rgba(45, 45, 60, 0.8);
  --weather-card-border: rgba(255, 255, 255, 0.1);
  --section-title-color: #f7fafc;
  --date-color: #cbd5e0;
  --summary-color: #f7fafc;
  --temp-unit-color: #e2e8f0;
  --divider-color: #4a5568;
  --error-bg: rgba(220, 38, 38, 0.1);
  --error-border: #ef4444;
  --error-text: #fca5a5;
  --skeleton-bg-1: rgba(255, 255, 255, 0.05);
  --skeleton-bg-2: rgba(255, 255, 255, 0.1);
  --tile-min-height: 120px;
  --tile-gap: 0.75rem;
  --cta-height: 3rem;
  --card-inner-gap: 1rem;
  --focus-color: #a78bfa;
  --input-bg: rgba(0, 0, 0, 0.2);
  --fab-safe-bottom: calc(56px + 24px + 16px);
  --select-bg: rgba(30, 30, 50, 0.85);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e0' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}