/* BotStall — Theme System (dark default, light optional) */

/* ---- Dark theme (default) ---- */
:root,
[data-theme="dark"] {
  --bg: #0d1117;
  --surface: #161b22;
  --surface-2: #1c2333;
  --border: #30363d;
  --text: #e6edf3;
  --text-muted: #8b949e;
  --accent: #58a6ff;
  --accent-2: #7ee787;
  --accent-3: #d2a8ff;
  --accent-4: #ffa657;
  --accent-5: #ff7b72;
  --warning: #d29922;
  --success: #3fb950;
  --shadow: rgba(0, 0, 0, 0.4);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.3);
  --radius: 8px;
  --transition: 0.2s ease;
}

/* ---- Light theme ---- */
[data-theme="light"] {
  --bg: #f6f8fa;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #d0d7de;
  --text: #1f2328;
  --text-muted: #57606a;
  --accent: #0969da;
  --accent-2: #1a7f37;
  --accent-3: #8250df;
  --accent-4: #bc4c00;
  --accent-5: #cf222e;
  --warning: #9a6700;
  --success: #1a7f37;
  --shadow: rgba(0, 0, 0, 0.08);
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.1);
  --radius: 8px;
  --transition: 0.2s ease;
}

/* ---- Theme toggle button ---- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 15px;
  transition: all 0.2s ease;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--surface-2);
  border-color: var(--text-muted);
  color: var(--text);
}

/* Light theme: fix select arrow color */
[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2357606a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* Light theme: hero gradient adjustments */
[data-theme="light"] .hero-v2::before {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(9, 105, 218, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(130, 80, 223, 0.05) 0%, transparent 60%);
}

/* Light theme: category card hover */
[data-theme="light"] .cat-card:hover,
[data-theme="light"] .cat-card.active {
  border-color: var(--accent);
  background: rgba(9, 105, 218, 0.05);
}

/* Light theme: SPK callout */
[data-theme="light"] .spk-callout {
  background: rgba(26, 127, 55, 0.05);
  border-color: rgba(26, 127, 55, 0.2);
}

/* Light theme: card shadows */
[data-theme="light"] .card:hover {
  box-shadow: var(--shadow-card);
}