/**
 * Carbon4Planet — Dark Mode v1.0
 * D211-D212: Dark theme CSS variables + prefers-color-scheme auto-detect
 */

/* ── Prefers-color-scheme auto (when no manual override) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-primary: #4ade80;
    --color-primary-light: #86efac;
    --color-primary-pale: #052e16;
    --color-accent: #fbbf24;
    --color-accent-pale: #422006;
    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-surface-alt: #334155;
    --color-border: #334155;
    --color-border-strong: #475569;
    --color-text: #f1f5f9;
    --color-text-muted: #94a3b8;
    --color-text-faint: #64748b;
    --color-dark: #0f172a;
    --color-dark-surface: #1e293b;
    --color-dark-border: #334155;
    --color-dark-text: #f1f5f9;
    --color-dark-muted: #94a3b8;
    --color-error: #fca5a5;
    --color-error-pale: #450a0a;
    --color-warning: #fbbf24;
    --color-warning-pale: #451a03;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  }
}

/* ── Manual dark theme override ── */
[data-theme="dark"] {
  --color-primary: #4ade80;
  --color-primary-light: #86efac;
  --color-primary-pale: #052e16;
  --color-accent: #fbbf24;
  --color-accent-pale: #422006;
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-surface-alt: #334155;
  --color-border: #334155;
  --color-border-strong: #475569;
  --color-text: #f1f5f9;
  --color-text-muted: #94a3b8;
  --color-text-faint: #64748b;
  --color-dark: #0f172a;
  --color-dark-surface: #1e293b;
  --color-dark-border: #334155;
  --color-dark-text: #f1f5f9;
  --color-dark-muted: #94a3b8;
  --color-error: #fca5a5;
  --color-error-pale: #450a0a;
  --color-warning: #fbbf24;
  --color-warning-pale: #451a03;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
}

/* ── Dark mode overrides for Tailwind pages (priority patches) ── */
[data-theme="dark"] body {
  background: var(--color-bg);
  color: var(--color-text);
}

[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-\[\var(--color-bg)\] {
  background: var(--color-bg) !important;
}

[data-theme="dark"] .bg-\[\#fff\] {
  background: var(--color-surface) !important;
}

[data-theme="dark"] .text-\[\#1c1917\] {
  color: var(--color-text) !important;
}

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

[data-theme="dark"] .nav {
  background: var(--color-surface);
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .chart-container {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .panel-dark {
  background: var(--color-dark-surface);
  color: var(--color-dark-text);
}

/* ── ECharts dark adaptation ── */
[data-theme="dark"] .chart-container {
  background: var(--color-surface);
}

/* ── Inputs in dark mode ── */
[data-theme="dark"] .form-input {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-theme="dark"] .form-input::placeholder {
  color: var(--color-text-faint);
}

/* ── Tool cards ── */
[data-theme="dark"] .tool-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* ── Category tabs ── */
[data-theme="dark"] .cat-tab {
  color: var(--color-text-muted);
}

/* ── Badge adaptation ── */
[data-theme="dark"] .badge-beta {
  background: var(--color-accent-pale);
  color: var(--color-accent);
}

[data-theme="dark"] .badge-coming-soon,
[data-theme="dark"] .badge-prototype {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}