/**
 * theme.css — OptiSpace AI colour theme
 *
 * Single source of truth for all colours. To switch themes:
 *   1. Comment out the active :root block
 *   2. Uncomment the desired theme block
 *   3. Hard-refresh the browser — no rebuild needed
 *
 * Themes available:
 *   - Violet Pro     (current)
 *   - Slate + Coral
 *   - Ocean Breeze
 *   - Forest Green
 */

/* ── Active theme: Violet Pro ─────────────────────────────────────────────── */
/* Deep indigo sidebar · vivid purple accents · lavender-white content         */
:root {
  /* Page & card backgrounds */
  --navy:        #f8f7ff;   /* page bg */
  --navy-mid:    #ffffff;   /* card / topbar bg */
  --navy-card:   #f5f3ff;   /* secondary card bg */

  /* Primary accent — all interactive elements, active states, highlights */
  --teal:        #7c3aed;
  --teal-dim:    rgba(124,58,237,0.10);
  --teal-glow:   rgba(124,58,237,0.22);
  --teal-lt:     #c4b5fd;   /* light accent — text on dark surfaces */

  /* Semantic colours */
  --amber:       #d97706;
  --amber-dim:   rgba(217,119,6,0.12);
  --red:         #dc2626;
  --red-dim:     rgba(220,38,38,0.10);
  --blue:        #2563eb;
  --blue-dim:    rgba(37,99,235,0.10);
  --purple:      #7c3aed;
  --purple-dim:  rgba(124,58,237,0.10);
  --green:       #059669;

  /* Text */
  --text:        #1e0a3c;   /* primary text on light bg */
  --text-dim:    #5b21b6;   /* secondary text on light bg */
  --text-muted:  #8b7ab8;   /* muted/placeholder text */

  /* Borders */
  --border:      rgba(124,58,237,0.12);
  --card:        rgba(124,58,237,0.04);  /* card background tint */

  /* Sidebar (always dark — independent of page bg) */
  --sidebar-bg:        #3b0764;
  --sidebar-border:    rgba(255,255,255,0.10);
  --sidebar-text:      rgba(255,255,255,0.60);
  --sidebar-text-hover:rgba(255,255,255,0.95);
  --sidebar-active-bg: rgba(196,181,253,0.15);
  --sidebar-active-fg: #c4b5fd;
  --sidebar-active-bar:#a78bfa;
  --sidebar-section:   rgba(255,255,255,0.35);
  --sidebar-avatar-bg: rgba(167,139,250,0.15);
  --sidebar-avatar-fg: #c4b5fd;
  --sidebar-role:      rgba(196,181,253,0.70);

  /* Layout */
  --sidebar-w:   232px;
  --chat-w:      310px;
}

/*
── Theme: Slate + Coral ────────────────────────────────────────────────────────
Charcoal slate sidebar · coral-red accents · pure white content

:root {
  --navy:        #fafafa;
  --navy-mid:    #ffffff;
  --navy-card:   #fff1f2;
  --teal:        #e11d48;
  --teal-dim:    rgba(225,29,72,0.10);
  --teal-glow:   rgba(225,29,72,0.22);
  --teal-lt:     #fda4af;
  --amber:       #d97706;
  --amber-dim:   rgba(217,119,6,0.12);
  --red:         #dc2626;
  --red-dim:     rgba(220,38,38,0.10);
  --blue:        #2563eb;
  --blue-dim:    rgba(37,99,235,0.10);
  --purple:      #8b5cf6;
  --purple-dim:  rgba(139,92,246,0.10);
  --green:       #059669;
  --text:        #0f172a;
  --text-dim:    #475569;
  --text-muted:  #94a3b8;
  --border:      rgba(0,0,0,0.08);
  --card:        rgba(0,0,0,0.03);
  --sidebar-bg:        #0f172a;
  --sidebar-border:    rgba(255,255,255,0.08);
  --sidebar-text:      rgba(255,255,255,0.60);
  --sidebar-text-hover:rgba(255,255,255,0.95);
  --sidebar-active-bg: rgba(225,29,72,0.15);
  --sidebar-active-fg: #fda4af;
  --sidebar-active-bar:#e11d48;
  --sidebar-section:   rgba(255,255,255,0.35);
  --sidebar-avatar-bg: rgba(225,29,72,0.15);
  --sidebar-avatar-fg: #fda4af;
  --sidebar-role:      rgba(253,164,175,0.70);
  --sidebar-w:   232px;
  --chat-w:      310px;
}
────────────────────────────────────────────────────────────────────────────── */

/*
── Theme: Ocean Breeze ─────────────────────────────────────────────────────────
Deep navy blue sidebar · sky blue accents · crisp white content

:root {
  --navy:        #f5f9ff;
  --navy-mid:    #ffffff;
  --navy-card:   #eff6ff;
  --teal:        #1a56db;
  --teal-dim:    rgba(26,86,219,0.10);
  --teal-glow:   rgba(26,86,219,0.22);
  --teal-lt:     #93c5fd;
  --amber:       #d97706;
  --amber-dim:   rgba(217,119,6,0.12);
  --red:         #dc2626;
  --red-dim:     rgba(220,38,38,0.10);
  --blue:        #1a56db;
  --blue-dim:    rgba(26,86,219,0.10);
  --purple:      #8b5cf6;
  --purple-dim:  rgba(139,92,246,0.10);
  --green:       #059669;
  --text:        #1e3a8a;
  --text-dim:    #2563eb;
  --text-muted:  #93c5fd;
  --border:      rgba(26,86,219,0.12);
  --card:        rgba(26,86,219,0.04);
  --sidebar-bg:        #1e3a8a;
  --sidebar-border:    rgba(255,255,255,0.10);
  --sidebar-text:      rgba(255,255,255,0.60);
  --sidebar-text-hover:rgba(255,255,255,0.95);
  --sidebar-active-bg: rgba(147,197,253,0.15);
  --sidebar-active-fg: #93c5fd;
  --sidebar-active-bar:#60a5fa;
  --sidebar-section:   rgba(255,255,255,0.35);
  --sidebar-avatar-bg: rgba(96,165,250,0.15);
  --sidebar-avatar-fg: #93c5fd;
  --sidebar-role:      rgba(147,197,253,0.70);
  --sidebar-w:   232px;
  --chat-w:      310px;
}
────────────────────────────────────────────────────────────────────────────── */

/*
── Theme: Forest Green ─────────────────────────────────────────────────────────
Deep forest sidebar · emerald accents · warm white · sustainability feel

:root {
  --navy:        #f4faf6;
  --navy-mid:    #ffffff;
  --navy-card:   #f0fdf4;
  --teal:        #16a34a;
  --teal-dim:    rgba(22,163,74,0.10);
  --teal-glow:   rgba(22,163,74,0.22);
  --teal-lt:     #86efac;
  --amber:       #d97706;
  --amber-dim:   rgba(217,119,6,0.12);
  --red:         #dc2626;
  --red-dim:     rgba(220,38,38,0.10);
  --blue:        #2563eb;
  --blue-dim:    rgba(37,99,235,0.10);
  --purple:      #8b5cf6;
  --purple-dim:  rgba(139,92,246,0.10);
  --green:       #16a34a;
  --text:        #14532d;
  --text-dim:    #166534;
  --text-muted:  #86efac;
  --border:      rgba(22,163,74,0.12);
  --card:        rgba(22,163,74,0.04);
  --sidebar-bg:        #14532d;
  --sidebar-border:    rgba(255,255,255,0.10);
  --sidebar-text:      rgba(255,255,255,0.60);
  --sidebar-text-hover:rgba(255,255,255,0.95);
  --sidebar-active-bg: rgba(134,239,172,0.15);
  --sidebar-active-fg: #86efac;
  --sidebar-active-bar:#4ade80;
  --sidebar-section:   rgba(255,255,255,0.35);
  --sidebar-avatar-bg: rgba(74,222,128,0.15);
  --sidebar-avatar-fg: #86efac;
  --sidebar-role:      rgba(134,239,172,0.70);
  --sidebar-w:   232px;
  --chat-w:      310px;
}
────────────────────────────────────────────────────────────────────────────── */