:root {
  /* Paleta principal */
  --primary: #8A2BE2;
  --primary-hover: #7B68EE;
  --primary-light: rgba(138, 43, 226, 0.1);

  --secondary: #FF4500;
  --secondary-hover: #FF6347;
  --secondary-light: rgba(255, 69, 0, 0.1);
  --secondary-75: rgba(255, 69, 0, 0.75);

  --accent: #FFD700;

  /* Escala de grises y básicos */
  --dark: #2D1B69;
  --gray: #5a6268;
  --light-gray: #f8f9fa;
  --white: #ffffff;

  /* Estados */
  --success: #28a745;
  --danger: #dc3545;
  --warning: #ffc107;
  --info: #17a2b8;

  /* Gradientes compartidos */
  --gradient-primary: linear-gradient(135deg, #8A2BE2 0%, #FF4500 100%);
  --gradient-secondary: linear-gradient(135deg, #FF4500 0%, #FFD700 100%);
  --gradient-secondary-75: linear-gradient(135deg, rgba(255, 69, 0, 0.75) 0%, rgba(255, 215, 0, 0.75) 100%);
  --gradient-dark: linear-gradient(135deg, #2D1B69 0%, #8A2BE2 100%);

  /* Tokens de UI */
  --border-radius: 12px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow: 0 4px 6px rgba(138, 43, 226, 0.1);
  --shadow-lg: 0 10px 25px rgba(138, 43, 226, 0.2);
  --shadow-xl: 0 20px 40px rgba(138, 43, 226, 0.3);
  --glow: 0 0 20px rgba(138, 43, 226, 0.5);

  /* Layout */
  --grid-gap: 1rem;

  /* Footer defaults (overridable via customization) */
  --footer-bg: #2c3e50;
  --color-footer-text: #ecf0f1;
  --color-footer-whatsapp: #25D366;
  --color-footer-email: #ecf0f1;
}

/* Tema oscuro opcional (solo se activa si se añade data-theme="dark" al html/body) */
[data-theme="dark"] {
  --white: #121212;
  --light-gray: #1e1e1e;
  --dark: #e6e6e6;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.45);
}