/* ====================================================================
   TOKENS DE MARCA — Masajes Mérida Colonial Spa
   Único archivo donde se permiten valores hex de color.
   ==================================================================== */

:root {
  /* Paleta de color — proporciones de uso indicadas por el cliente */
  --color-azul-profundo: #091b2c;   /* 50% — dominante, fondos oscuros */
  --color-azul-medio:    #1b3b5b;   /* 30% — secciones, hover states */
  --color-dorado:        #c8a36f;   /* 15% — acentos, CTAs, detalles */
  --color-azul-claro:    #93adbc;   /*  5% — detalles sutiles, líneas */
  --color-blanco:        #fffdf8;   /* blanco cálido (no puro), tono moodboard */
  --color-texto-claro:   #f5f2ec;

  /* Paleta cálida — inspirada en el moodboard (base crema, no blanco puro) */
  --color-crema:        #f6efe1;   /* fondo base de secciones claras */
  --color-crema-borde:  #e6d8bf;   /* hairline sobre fondo crema */
  --color-azul-profundo-rgb: 9, 27, 44; /* mismo tono que --color-azul-profundo,
                                            en componentes RGB para el velo de
                                            degradado del hero (rgba en components.css) */

  /* Verde de WhatsApp — única excepción deliberada a la paleta de marca:
     se usa solo en el botón flotante de contacto porque el reconocimiento
     inmediato del color de la plataforma aumenta el click-through más que
     mantenerlo en dorado/azul. */
  --color-whatsapp: #25d366;
  --color-dorado-texto: #7d5f35;   /* dorado oscurecido para TEXTO sobre fondos
                                      claros: 5.15:1 sobre crema, 5.8:1 sobre
                                      blanco (WCAG AA). El dorado de marca
                                      (#c8a36f) se reserva para texto sobre
                                      fondos oscuros y para detalles no
                                      textuales (bordes, íconos). */

  /* Tipografía — CONFIRMADA en BRANDING MM_comprimido.pdf, self-hosted
     en app/static/fonts/ (ver fonts.css). Se mantiene un fallback de
     sistema por si la fuente tarda en cargar o falla. */
  --font-heading: 'Eternalo', 'Playfair Display', Georgia, serif;
  --font-body: 'Montserrat', -apple-system, sans-serif;

  /* Espaciado — el moodboard exige "espaciados bien definidos" */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  /* Bordes sutiles (mandato explícito del moodboard) */
  --border-subtle: 1px solid rgba(200, 163, 111, 0.25);
  --radius-elegante: 4px;

  /* Lenguaje de formas "arco colonial" — el motivo del imagotipo
     (arco + ventana de casona meridana) aplicado a marcos de foto y
     tarjetas. Escala mobile-first; ver responsive.css para valores
     más grandes en pantallas anchas. */
  --radius-pill: 999px;                       /* botones, insignias */
  --radius-arco: 70px 70px 14px 14px;          /* marcos de foto/video */
  --radius-suave: 1.25rem 1.25rem 1.25rem 0.3rem;   /* cards */
  --radius-tarjeta: 1.5rem 1.5rem 1.5rem 0.4rem;    /* banner CTA */

  /* Tokens derivados de la paleta (mismos valores de marca) */
  --sombra-header: 0 2px 12px rgba(9, 27, 44, 0.25);
  --sombra-card: 0 8px 24px rgba(9, 27, 44, 0.08);
}