/* ── Theme System ────────────────────────────────────────────────────────── */
/* Applied via data-theme attribute on <html> element                        */

[data-theme="dark"] {
  --color-bg: #0A0E27;
  --color-surface: #0D1130;
  --color-border: rgba(255, 255, 255, 0.06);
  --color-text: #e2e8f0;
  --color-text-muted: #64748b;
  --color-accent: var(--color-accent-custom, #6366f1);
  color-scheme: dark;
}

[data-theme="light"] {
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-border: #e2e8f0;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
  --color-accent: var(--color-accent-custom, #6366f1);
  color-scheme: light;
}

/* Light-mode overrides for hardcoded dark backgrounds */
[data-theme="light"] .bg-\[\#0A0E27\],
[data-theme="light"] .bg-\[\#0f1117\],
[data-theme="light"] .bg-\[\#080B20\],
[data-theme="light"] .bg-\[\#0D1130\],
[data-theme="light"] .bg-\[\#0D1130\]\/70 {
  background-color: var(--color-surface) !important;
}

[data-theme="light"] .bg-black\/60,
[data-theme="light"] .bg-black\/50 {
  background-color: rgba(0, 0, 0, 0.3) !important;
}

[data-theme="light"] .bg-white\/\[0\.03\],
[data-theme="light"] .bg-white\/\[0\.04\],
[data-theme="light"] .bg-white\/\[0\.05\],
[data-theme="light"] .bg-white\/\[0\.06\] {
  background-color: rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .bg-white\/\[0\.02\] {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

[data-theme="light"] .bg-white\/\[0\.08\] {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .border-white\/\[0\.06\],
[data-theme="light"] .border-white\/\[0\.08\],
[data-theme="light"] .border-white\/5,
[data-theme="light"] .border-white\/10 {
  border-color: var(--color-border) !important;
}

[data-theme="light"] .text-white {
  color: var(--color-text) !important;
}

[data-theme="light"] .text-slate-200,
[data-theme="light"] .text-slate-300 {
  color: #334155 !important;
}

[data-theme="light"] .text-slate-400 {
  color: #64748b !important;
}

[data-theme="light"] .text-slate-500 {
  color: #94a3b8 !important;
}

[data-theme="light"] .text-slate-600 {
  color: #94a3b8 !important;
}

[data-theme="light"] .placeholder-slate-500::placeholder,
[data-theme="light"] .placeholder-slate-600::placeholder {
  color: #94a3b8 !important;
}

[data-theme="light"] .hover\:bg-white\/\[0\.04\]:hover,
[data-theme="light"] .hover\:bg-white\/\[0\.06\]:hover,
[data-theme="light"] .hover\:bg-white\/\[0\.08\]:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .hover\:text-white:hover {
  color: var(--color-text) !important;
}

[data-theme="light"] .divide-white\/\[0\.04\] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-border) !important;
}

/* Ambient background glow override for light mode */
[data-theme="light"] .ambient-bg {
  background-image: none !important;
}

/* Fallback: if no data-theme is set, default to dark */
:root:not([data-theme]) {
  --color-bg: #0A0E27;
  --color-surface: #0D1130;
  --color-border: rgba(255, 255, 255, 0.06);
  --color-text: #e2e8f0;
  --color-text-muted: #64748b;
  --color-accent: var(--color-accent-custom, #6366f1);
  color-scheme: dark;
}

/* ── Accent Utility Classes ──────────────────────────────────────────── */
/* These use the CSS variables set by ThemeContext.applyAccent()         */

.accent-btn {
  background: var(--accent-bg, rgba(99, 102, 241, 0.15));
  color: var(--accent-light, #818cf8);
  border: 1px solid var(--accent-border, rgba(99, 102, 241, 0.2));
  transition: all 0.2s ease;
}
.accent-btn:hover:not(:disabled) {
  background: var(--accent-bg-hover, rgba(99, 102, 241, 0.25));
  border-color: var(--accent-border-hover, rgba(99, 102, 241, 0.35));
}
.accent-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.accent-toggle {
  background: var(--accent-bg, rgba(99, 102, 241, 0.15));
}
.accent-toggle .accent-toggle-dot {
  background: var(--accent, #6366f1);
}

.accent-active {
  background: var(--accent-bg, rgba(99, 102, 241, 0.15));
  color: var(--accent, #6366f1);
  border-color: var(--accent-border, rgba(99, 102, 241, 0.2));
  box-shadow: 0 4px 15px var(--accent-shadow, rgba(99, 102, 241, 0.05));
}

.accent-focus:focus {
  border-color: var(--accent-border, rgba(99, 102, 241, 0.3));
  box-shadow: 0 0 0 2px var(--accent-ring, rgba(99, 102, 241, 0.15));
  outline: none;
}

.accent-text {
  color: var(--accent, #6366f1);
}

.accent-icon-badge {
  background: var(--accent-bg-subtle, rgba(99, 102, 241, 0.08));
  border: 1px solid var(--accent-border, rgba(99, 102, 241, 0.15));
}

.accent-success-toast {
  background: var(--accent-bg, rgba(99, 102, 241, 0.2));
  border: 1px solid var(--accent-border, rgba(99, 102, 241, 0.3));
  color: var(--accent, #6366f1);
}
