/* Variables de tema */
:root {
  --bg-primary: #f5f7fa;
  --bg-secondary: white;
  --bg-tertiary: #f9fafb;
  --text-primary: #1a1a1a;
  --text-secondary: #667085;
  --text-tertiary: #98a2b3;
  --border-color: #e5e7eb;
  --accent: #90100f;
  --accent-light: #ffe5e4;
  --shadow: rgba(0, 0, 0, 0.08);
  --shadow-hover: rgba(0, 0, 0, 0.15);

  /* Alias de nombres heredados que se usan por todo el código pero nunca se
     habían definido (botones que salían "vacíos", sliders sin color). Como
     var() se resuelve en el sitio de uso, estos siguen el tema claro/oscuro. */
  --primary-color: var(--accent);
  --accent-color: var(--accent);
  --surface-color: var(--bg-secondary);
}

[data-theme="dark"] {
  --bg-primary: #0f1419;
  --bg-secondary: #1a1f29;
  --bg-tertiary: #232933;
  --text-primary: #e8ecf1;
  --text-secondary: #a0aec0;
  --text-tertiary: #718096;
  --border-color: #2d3748;
  --accent: #e5484d;
  --accent-light: #2d1414;
  --shadow: rgba(0, 0, 0, 0.3);
  --shadow-hover: rgba(255, 255, 255, 0.1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  padding: 20px;
}