/* Variables Globales y Temas */

:root, body.theme-light {
  /* Modo Sol (Claro) con paleta "El Fuego del Consejo" (Almagre/Terracota) */
  --bg-color: #f8f9fa; /* Piedra caliza/Arena muy clara */
  --text-primary: #1e293b; /* Basalto casi negro para buen contraste */
  --text-secondary: #64748b;
  --accent-color: #c2410c; /* Almagre / Terracota intenso */
  --accent-hover: #9a3412;
  --glass-bg: rgba(255, 255, 255, 0.75); /* Cristal blanco esmerilado */
  --glass-border: rgba(0, 0, 0, 0.08);
  --font-family: 'Inter', system-ui, sans-serif;
  
  --bg-gradient-1: rgba(194, 65, 12, 0.05);
  --bg-gradient-2: rgba(217, 119, 6, 0.08);
}

body.theme-dark {
  /* Modo Luna (Oscuro) con paleta "El Fuego del Consejo" (Obsidiana/Ámbar) */
  --bg-color: #0f172a; /* Basalto noche */
  --text-primary: #f8fafc; 
  --text-secondary: #94a3b8;
  --accent-color: #d97706; /* Ámbar/Dorado */
  --accent-hover: #b45309;
  --glass-bg: rgba(30, 41, 59, 0.7); /* Cristal negro esmerilado */
  --glass-border: rgba(255, 255, 255, 0.1);
  
  --bg-gradient-1: rgba(217, 119, 6, 0.15);
  --bg-gradient-2: rgba(180, 83, 9, 0.15);
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: var(--font-family);
  background-image: 
    radial-gradient(circle at 15% 50%, var(--bg-gradient-1), transparent 25%),
    radial-gradient(circle at 85% 30%, var(--bg-gradient-2), transparent 25%);
  background-attachment: fixed;
  overflow-x: hidden;
  scroll-behavior: smooth;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* Utilidades Globales Glassmorphism */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.btn-primary {
  background: var(--accent-color);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px var(--bg-gradient-1);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--text-secondary);
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.btn-secondary:hover {
  background: rgba(128, 128, 128, 0.1);
  border-color: var(--text-primary);
}