/* ===========================================================================
 * brand.css — Universo de Aromas (vidriera)
 * Fuente de verdad: studio/clientes/liliana/marca/brand-tokens.css
 * Dirección 2 "AURORA DORADA" — rose-gold / luz del amanecer (la elegida por Liliana).
 * Roles (corrección 2026-06-22 tarde-2: fondo claro, acentos hacen el color):
 *   - Fondo dominante = BLANCO CÁLIDO casi-blanco #faf6f0 (luz/aire; el durazno se fue)
 *   - Superficie de tarjetas = BLANCO CÁLIDO #fffdf9 (separa del fondo como superficie)
 *   - Acento/sello = ROSA CUARZO #e8c8c8 — ahora POPea contra el claro
 *   - DORADO #b07040 SOLO como hairlines/detalles finos — NUNCA bloque (= "marrón caca")
 *   - Texto/títulos = CACAO oscuro #3d2c1e
 *   - CTA = ROSA VIEJO enriquecido (vivo, no apagado, no ciruela)
 * Aurora Dorada = CONTRASTE de fondo claro + acentos rose-gold, NO fondo durazno.
 * Sin rojo, sin ciruela, sin terracota. Net feel: claro, aireado, luminoso, rose-gold.
 * ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;1,6..96,400&family=Mulish:wght@400;500;600;700&display=swap');

:root {
  /* Marca — rosa viejo profundo como ancla (AA-safe sobre durazno y crema) */
  --color-primary:       #8f4458;  /* rosa viejo profundo — ancla (4.9:1 sobre durazno) */
  --color-primary-dark:  #6e3343;  /* rosa viejo oscuro — hover/texto */
  --color-primary-press: #5e2b39;  /* pressed */
  --color-primary-light: #f3e2e2;  /* tint rosa cuarzo — chip/hover */

  /* CTA — ROSA VIEJO VIVO (enriquecido, no apagado; familia rosa, no ciruela).
     blanco encima: 5.3:1 (top) → 7.0:1 (base). Hairline dorado le da vida. */
  --color-cta:        #b04766;  /* rosa viejo vivo — top del gradiente */
  --color-cta-2:      #8a4257;  /* rosa viejo profundo — base del gradiente / hover */
  --color-cta-hover:  #a23e5e;  /* hover sólido */

  --color-accent:        #b07040;  /* dorado amanecer — SOLO hairlines/detalles finos, nunca bloque */
  --color-accent-deep:   #7a4a20;  /* dorado profundo — eyebrow/texto-acento sobre claro (AA 5.4:1) */
  --color-accent-light:  #e8c8c8;  /* rosa cuarzo — tint placeholder/badge/sello */

  /* Neutros — BLANCO CÁLIDO domina (aire), los acentos hacen el color */
  --color-bg:        #faf6f0;  /* blanco cálido casi-blanco — fondo dominante (luz/aire) */
  --color-bg-2:      #f4ede3;  /* un punto más cálido — gradiente suave, sigue casi-blanco */
  --color-bg-card:   #fffdf9;  /* blanco cálido — superficie de tarjetas (separa del fondo) */
  --color-text:      #3d2c1e;  /* cacao oscuro — 11.5:1 sobre fondo claro, 12.7:1 sobre card */
  --color-text-muted:#6e5848;  /* cacao suave — secundario (AA 5.7:1 sobre fondo claro) */
  --color-border:    rgba(61, 44, 30, 0.14);
  --color-hairline-gold: rgba(176, 112, 64, 0.55);

  /* Semánticos */
  --color-success: #4a7a55;
  --color-danger:  #a83a3a;
  --color-warning: #b07040;

  /* Tipografía */
  --font-display: 'Bodoni Moda', 'Times New Roman', Georgia, serif;
  --font-body:    'Mulish', system-ui, -apple-system, sans-serif;

  /* Forma */
  --radius: 6px;
  --radius-lg: 12px;
  --shadow:      0 1px 2px rgba(46, 34, 48, 0.05);
  --shadow-card: 0 6px 24px -8px rgba(46, 34, 48, 0.10);

  --tap-min: 44px;
}

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

html, body { max-width: 100%; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  /* blanco cálido dominante con una sutil subida de luz rose-gold hacia arriba (amanecer) */
  background:
    radial-gradient(120% 80% at 50% -10%, #fbeede 0%, transparent 50%),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-2) 100%);
  background-attachment: fixed;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}