/*
  variables.css
  ─────────────────────────────────────────────────────────────
  Aquí están todos los colores, fuentes y valores reutilizables.
  Si quieres cambiar algún color o fuente, hazlo aquí y se
  actualizará automáticamente en todo el sitio.
*/

:root {
  /* ── Colores principales ── */
  --rojo:         #8B1A1A;   /* Rojo vino - color dominante del logo */
  --rojo-claro:   #B22222;   /* Rojo más brillante para acentos */
  --rojo-deep:    #5C0E0E;   /* Rojo muy oscuro para fondos */

  --dorado:       #D4A017;   /* Dorado - color de acento */
  --dorado-claro: #F0C040;   /* Dorado brillante para highlights */

  --negro:        #0E0B0B;   /* Negro principal - fondo general */
  --negro-mid:    #1A1414;   /* Negro medio - secciones alternas */
  --negro-soft:   #261E1E;   /* Negro suave - tarjetas y hover */

  --blanco:       #FAF6F0;   /* Blanco cálido - texto principal */
  --gris:         #C8B8A2;   /* Gris cálido - texto secundario */
  --gris-dark:    #6B5B4E;   /* Gris oscuro - texto terciario */

  /* ── Tipografías ── */
  --font-display: 'Cinzel Decorative', serif;  /* Títulos principales */
  --font-heading: 'Cinzel', serif;             /* Subtítulos y etiquetas */
  --font-body:    'Lato', sans-serif;          /* Texto general */

  /* ── Transición global ── */
  --transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}