/* ============================================
   THEME SYSTEM - Multiple Professional Themes
   ============================================ */

/* Theme 1: Current Dark Tech/IOT Theme */
[data-theme="dark-tech"],
:root:not([data-theme]) {
  --bg: #0f172a;
  --bg-gradient-start: #1e293b;
  --bg-gradient-mid: #0f172a;
  --bg-gradient-end: #020617;
  --card: rgba(15, 23, 42, 0.45);
  --card-border: rgba(148, 163, 184, 0.12);
  --text: #e2e8f0;
  --text-heading: #ffffff;
  --muted: #94a3b8;
  --accent: #38bdf8;
  --accent-bg: rgba(56, 189, 248, 0.12);
  --accent-border: rgba(56, 189, 248, 0.3);
}

/* Theme 2: Warm Professional (Cream/Beige) */
[data-theme="warm-professional"] {
  --bg: #faf8f5;
  --bg-gradient-start: #f5f1eb;
  --bg-gradient-mid: #faf8f5;
  --bg-gradient-end: #f0ebe3;
  --card: rgba(255, 255, 255, 0.7);
  --card-border: rgba(139, 115, 85, 0.15);
  --text: #3d3229;
  --text-heading: #2a1f1a;
  --muted: #8b7355;
  --accent: #b8732e;
  --accent-bg: rgba(184, 115, 46, 0.08);
  --accent-border: rgba(184, 115, 46, 0.25);
}

/* Theme 3: Minimalist Light */
[data-theme="minimalist-light"] {
  --bg: #ffffff;
  --bg-gradient-start: #fafafa;
  --bg-gradient-mid: #ffffff;
  --bg-gradient-end: #f5f5f5;
  --card: rgba(250, 250, 250, 0.6);
  --card-border: rgba(0, 0, 0, 0.08);
  --text: #1a1a1a;
  --text-heading: #000000;
  --muted: #6b6b6b;
  --accent: #0066cc;
  --accent-bg: rgba(0, 102, 204, 0.06);
  --accent-border: rgba(0, 102, 204, 0.2);
}

/* Theme 4: Academic Classic */
[data-theme="academic-classic"] {
  --bg: #f8f9fa;
  --bg-gradient-start: #e9ecef;
  --bg-gradient-mid: #f8f9fa;
  --bg-gradient-end: #e9ecef;
  --card: rgba(255, 255, 255, 0.85);
  --card-border: rgba(73, 80, 87, 0.15);
  --text: #212529;
  --text-heading: #000000;
  --muted: #6c757d;
  --accent: #1e5a9d;
  --accent-bg: rgba(30, 90, 157, 0.08);
  --accent-border: rgba(30, 90, 157, 0.25);
}

/* Theme 5: Forest Green */
[data-theme="forest-green"] {
  --bg: #f4f7f5;
  --bg-gradient-start: #e8f0ea;
  --bg-gradient-mid: #f4f7f5;
  --bg-gradient-end: #e1eae3;
  --card: rgba(255, 255, 255, 0.75);
  --card-border: rgba(46, 125, 50, 0.12);
  --text: #1b3a1e;
  --text-heading: #0d2610;
  --muted: #4a5c4b;
  --accent: #2e7d32;
  --accent-bg: rgba(46, 125, 50, 0.08);
  --accent-border: rgba(46, 125, 50, 0.25);
}

/* Apply theme colors to body background */
body {
  background: radial-gradient(
    circle at top,
    var(--bg-gradient-start),
    var(--bg-gradient-mid) 45%,
    var(--bg-gradient-end)
  );
  color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading);
}

/* Theme Switcher Styles */
.theme-switcher {
  position: relative;
  display: inline-block;
}

.theme-switcher-btn {
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
}

.theme-switcher-btn:hover {
  background: var(--accent-bg);
  border-color: var(--accent-border);
}

.theme-switcher-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 0.5rem;
  padding: 0.5rem;
  min-width: 200px;
  display: none;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.theme-switcher-dropdown.show {
  display: block;
}

.theme-option {
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  border-radius: 0.375rem;
  color: var(--text);
  transition: all 0.2s;
  display: block;
  text-decoration: none;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
}

.theme-option:hover {
  background: var(--accent-bg);
  color: var(--accent);
}

.theme-option.active {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 500;
}

/* Theme preview dots */
.theme-preview {
  display: inline-flex;
  gap: 4px;
  margin-right: 8px;
}

.theme-preview span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

/* Theme preview colors */
.theme-preview.dark-tech span:nth-child(1) { background: #0f172a; }
.theme-preview.dark-tech span:nth-child(2) { background: #38bdf8; }
.theme-preview.dark-tech span:nth-child(3) { background: #94a3b8; }

.theme-preview.warm-professional span:nth-child(1) { background: #faf8f5; border: 1px solid #ddd; }
.theme-preview.warm-professional span:nth-child(2) { background: #b8732e; }
.theme-preview.warm-professional span:nth-child(3) { background: #8b7355; }

.theme-preview.minimalist-light span:nth-child(1) { background: #ffffff; border: 1px solid #ddd; }
.theme-preview.minimalist-light span:nth-child(2) { background: #0066cc; }
.theme-preview.minimalist-light span:nth-child(3) { background: #6b6b6b; }

.theme-preview.academic-classic span:nth-child(1) { background: #f8f9fa; border: 1px solid #ddd; }
.theme-preview.academic-classic span:nth-child(2) { background: #1e5a9d; }
.theme-preview.academic-classic span:nth-child(3) { background: #6c757d; }

.theme-preview.forest-green span:nth-child(1) { background: #f4f7f5; border: 1px solid #ddd; }
.theme-preview.forest-green span:nth-child(2) { background: #2e7d32; }
.theme-preview.forest-green span:nth-child(3) { background: #4a5c4b; }