/* frontend/src/index.css */

:root {
  color-scheme: light;
  --color-background: linear-gradient(135deg, #ece9e6, #ffffff);
  --color-text: #111827;
  --color-muted: #4b5563;
  --color-surface: #ffffff;
  --color-surface-border: #e5e7eb;
  --color-button-bg: #f9fafb;
  --color-button-border: #d1d5db;
  --color-button-text: #1f2937;
  --color-button-hover-bg: #111827;
  --color-button-hover-text: #f9fafb;
  --color-button-hover-border: #111827;
  --chart-surface: rgba(255, 255, 255, 0.96);
  --chart-surface-border: rgba(209, 213, 219, 0.8);
  --chart-text-primary: #0f172a;
  --chart-text-secondary: #4b5563;
  --chart-control-bg: #f3f4f6;
  --chart-control-border: #d1d5db;
  --chart-control-text: #1f2937;
  --chart-control-hover-bg: #1f2937;
  --chart-control-hover-text: #f9fafb;
  --chart-control-hover-border: #1f2937;
  --chart-overlay-bg: rgba(255, 255, 255, 0.96);
  --chart-overlay-border: rgba(209, 213, 219, 0.65);
  --chart-overlay-title: #1d4ed8;
  --chart-overlay-muted: #6b7280;
  --chart-help-bg: rgba(255, 255, 255, 0.98);
  --chart-help-border: rgba(209, 213, 219, 0.8);
  --chart-help-text: #1f2937;
  --chart-help-title: #1d4ed8;
  --chart-legend-bg: rgba(248, 250, 252, 0.94);
  --chart-legend-border: rgba(209, 213, 219, 0.7);
  --chart-meta-text: #6b7280;
  --chart-spinner: #6b7280;
  --chart-operations-bg: rgba(255, 255, 255, 0.96);
  --chart-operations-border: #d1d5db;
  --chart-operations-text: #111827;
  --chart-operations-header-bg: rgba(226, 232, 240, 0.7);
  --chart-operations-header-text: #1d4ed8;
  --chart-series-color: #2563eb;
  --chart-grid-color: rgba(148, 163, 184, 0.35);
  --chart-marker-default: #ef4444;
  --chart-marker-failed: #f472b6;
  --chart-marker-text: #fdf2f8;
}

body.dark-mode {
  --color-background: radial-gradient(circle at top, rgba(15, 23, 42, 0.92), #0f172a 70%);
  --color-text: #e5e7eb;
  --color-muted: #9ca3af;
  --color-surface: #1f2937;
  --color-surface-border: #374151;
  --color-button-bg: #1f2937;
  --color-button-border: #4b5563;
  --color-button-text: #e5e7eb;
  --color-button-hover-bg: #10b981;
  --color-button-hover-text: #0b1120;
  --color-button-hover-border: #10b981;
  --chart-surface: rgba(15, 23, 42, 0.94);
  --chart-surface-border: #1f2937;
  --chart-text-primary: #e5e7eb;
  --chart-text-secondary: #9ca3af;
  --chart-control-bg: rgba(17, 24, 39, 0.85);
  --chart-control-border: #374151;
  --chart-control-text: #e5e7eb;
  --chart-control-hover-bg: #2563eb;
  --chart-control-hover-text: #0f172a;
  --chart-control-hover-border: #2563eb;
  --chart-overlay-bg: rgba(17, 24, 39, 0.92);
  --chart-overlay-border: #374151;
  --chart-overlay-title: #38bdf8;
  --chart-overlay-muted: #94a3b8;
  --chart-help-bg: rgba(15, 23, 42, 0.95);
  --chart-help-border: #1e293b;
  --chart-help-text: #e5e7eb;
  --chart-help-title: #38bdf8;
  --chart-legend-bg: rgba(17, 24, 39, 0.88);
  --chart-legend-border: #1f2937;
  --chart-meta-text: #9ca3af;
  --chart-spinner: #9ca3af;
  --chart-operations-bg: rgba(17, 24, 39, 0.9);
  --chart-operations-border: #1f2937;
  --chart-operations-text: #e5e7eb;
  --chart-operations-header-bg: rgba(30, 41, 59, 0.75);
  --chart-operations-header-text: #93c5fd;
  --chart-series-color: #38bdf8;
  --chart-grid-color: rgba(55, 65, 81, 0.6);
  --chart-marker-default: #ef4444;
  --chart-marker-failed: #f472b6;
  --chart-marker-text: #fdf2f8;
}

html {
  height: 100%;
}

body,
#root {
  min-height: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif; /* Puedes cambiar la fuente según prefieras */
  background: var(--color-background);
  color: var(--color-text);
  transition: background 0.3s ease, color 0.3s ease;
}