/* Tokens de cor: claro (padrão) e escuro quando o SO está em modo escuro */
html {
  color-scheme: light dark;
}

:root {
  --dx-bg: #f3f4f6;
  --dx-text: #111827;
  --dx-surface: #ffffff;
  --dx-surface-2: #f9fafb;
  --dx-border: #e5e7eb;
  --dx-muted: #6b7280;
  --dx-muted-2: #4b5563;
  --dx-heading: #374151;
  --dx-brand: #003399;
  --dx-brand-contrast: #ffffff;
  --dx-row-alt: #f9fafb;
  --dx-row-hover: #eef2ff;
  --dx-nav-dot: #d1d5db;
  --dx-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --dx-overlay: rgba(17, 24, 39, 0.45);
  --dx-error-bg: #fef2f2;
  --dx-error-text: #b91c1c;
  --dx-metric-border: rgba(0, 51, 153, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root {
    --dx-bg: #0b0f14;
    --dx-text: #e5e7eb;
    --dx-surface: #141b24;
    --dx-surface-2: #1a2332;
    --dx-border: #2d3a4d;
    --dx-muted: #9ca3af;
    --dx-muted-2: #cbd5e1;
    --dx-heading: #d1d5db;
    --dx-brand: #7aa8ff;
    --dx-brand-contrast: #0b0f14;
    --dx-row-alt: #1a2332;
    --dx-row-hover: #243044;
    --dx-nav-dot: #4b5563;
    --dx-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    --dx-overlay: rgba(0, 0, 0, 0.72);
    --dx-error-bg: #3f1a1a;
    --dx-error-text: #fca5a5;
    --dx-metric-border: rgba(122, 168, 255, 0.25);
  }
}

/* Tema explícito (botão / Electron): sobrescreve prefers-color-scheme */
html[data-theme="light"] {
  color-scheme: light;
  --dx-bg: #f3f4f6;
  --dx-text: #111827;
  --dx-surface: #ffffff;
  --dx-surface-2: #f9fafb;
  --dx-border: #e5e7eb;
  --dx-muted: #6b7280;
  --dx-muted-2: #4b5563;
  --dx-heading: #374151;
  --dx-brand: #003399;
  --dx-brand-contrast: #ffffff;
  --dx-row-alt: #f9fafb;
  --dx-row-hover: #eef2ff;
  --dx-nav-dot: #d1d5db;
  --dx-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --dx-overlay: rgba(17, 24, 39, 0.45);
  --dx-error-bg: #fef2f2;
  --dx-error-text: #b91c1c;
  --dx-metric-border: rgba(0, 51, 153, 0.14);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --dx-bg: #0b0f14;
  --dx-text: #e5e7eb;
  --dx-surface: #141b24;
  --dx-surface-2: #1a2332;
  --dx-border: #2d3a4d;
  --dx-muted: #9ca3af;
  --dx-muted-2: #cbd5e1;
  --dx-heading: #d1d5db;
  --dx-brand: #7aa8ff;
  --dx-brand-contrast: #0b0f14;
  --dx-row-alt: #1a2332;
  --dx-row-hover: #243044;
  --dx-nav-dot: #4b5563;
  --dx-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  --dx-overlay: rgba(0, 0, 0, 0.72);
  --dx-error-bg: #3f1a1a;
  --dx-error-text: #fca5a5;
  --dx-metric-border: rgba(122, 168, 255, 0.25);
}