/* ==========================================================================
   Velas Velia — Tokens del sistema de diseño  ·  Velia · Atelier de Aromas
   --------------------------------------------------------------------------
   ÚNICA FUENTE DE VERDAD para colores, tipografías, espaciados, radios,
   sombras y movimiento. Todo el CSS (main.css, plantillas, parts) consume
   estas variables y NO hardcodea valores visuales.

   Tokens OFICIALES exportados del proyecto de diseño Claude Design
   (Velia Design System). Paleta: base camel-oro sobre crema, con tres
   acentos boutique apagados — terracota, salvia, malva. Tipografías reales
   de marca (Erotique/Bicyclette/Buffalo) mapeadas a sustitutos libres
   (Playfair Display / Jost / Caveat) + Raleway y Libre Baskerville reales.

   Las fuentes se encolan desde functions.php (no @import) por rendimiento.
   ========================================================================== */

:root {
	/* ===== COLOR ========================================================= */

	/* --- Oro de marca (camel) — escala ---------------------------------- */
	--gold-900: #6E5736; /* Más profundo — pulsados, texto sobre crema   */
	--gold-800: #836A43;
	--gold-700: #927649; /* Hover sobre primario                          */
	--gold-600: #A1845E; /* ★ ORO PRIMARIO (logo, nav, footer)            */
	--gold-500: #B2986E;
	--gold-400: #C6B08A; /* Captions / sub-labels apagados                */
	--gold-300: #DBC9AC; /* Hairlines, divisores                          */
	--gold-200: #EADFCC; /* Rellenos tintados, superficies hover          */
	--gold-100: #F2EBDD; /* Lavado tenue de secciones                     */
	--gold-050: #F8F4EC; /* Fondo alternativo de tarjetas                 */
	--camel:     #B7A488; /* ★ Banda de nav + footer (más claro que 600) */
	--camel-300: #CFC1A8; /* Hover nav / barra de anuncio superior        */

	/* --- Neutros · "papel" / crema cálido ------------------------------- */
	--paper:      #FAF9F9; /* Casi-blanco primario                        */
	--cream:      #EFEDE6; /* ★ Fondo principal de secciones (crema)      */
	--cream-200:  #E7E2D7; /* Sección beige secundaria                    */
	--paper-warm: #F5F1EA; /* Sección cálida terciaria                    */
	--white:      #FFFFFF; /* Tarjetas, bordes de papel rasgado           */
	--ink-900:    #3B342B; /* Títulos sobre papel                         */
	--ink-700:    #574B3C; /* Texto de cuerpo (marrón-gris cálido)        */
	--ink-600:    #6A5E4D; /* Cuerpo de artículo                          */
	--ink-500:    #7A6E5E; /* Texto secundario                            */
	--ink-300:    #A89C8B; /* Deshabilitado / placeholder                 */
	--line:       #E7DECF; /* Hairline por defecto                        */
	--line-warm:  #DED6C8; /* Borde de tarjeta sobre crema                */

	/* --- Acento · TERRACOTA (arcilla/salmón) ---------------------------- */
	/* Pills de sección, divisores, estrellas de rating, CTA cálidos. */
	--terra-700: #A65E45;
	--terra-600: #C17A5F; /* ★ terracota principal */
	--terra-500: #CE8C73;
	--terra-300: #E6BBA9; /* tinte */
	--terra-200: #F1D5CB; /* relleno pastel */
	--terra-100: #F8E8E1; /* lavado tenue */

	/* --- Acento · SALVIA (verde oliva/sage) ----------------------------- */
	/* CTA "Lee la información", panel Valentina, tagline script. */
	--sage-700: #6F7A48;
	--sage-600: #8C9760; /* ★ sage principal */
	--sage-500: #9AA571;
	--sage-300: #C2CB9F; /* tinte */
	--sage-200: #DCE3C3; /* relleno pastel */
	--sage-100: #EDF1E0; /* lavado tenue */

	/* --- Acento · MALVA (lavanda apagada) ------------------------------- */
	/* Pills "Ebook" / "Preguntas frecuentes", reglas decorativas. */
	--malva-700: #7E6B90;
	--malva-600: #9885A8; /* ★ malva principal */
	--malva-500: #A896B6;
	--malva-300: #CBBFD6; /* tinte */
	--malva-200: #E1D8E8; /* relleno pastel */
	--malva-100: #F0EBF3; /* lavado tenue */

	/* --- Acentos fotográficos (muestreados, no swatches de marca) ------- */
	--blue-500: #7E97AD; /* azul editorial apagado (legacy retrato) */
	--blue-200: #D5DEE6;
	--rose-400: #E7B7B0; /* rosa "huella" en etiquetas */
	--whatsapp: #25D366; /* CTA de contacto / pedido */

	/* --- Alias semánticos ----------------------------------------------- */
	--bg:              var(--paper);
	--bg-section:      var(--cream);     /* la crema donde vive el storefront */
	--bg-section-warm: var(--cream-200);
	--surface-card:    var(--white);
	--surface-tinted:  var(--gold-100);

	--brand:       var(--gold-600);
	--brand-deep:  var(--gold-900);
	--brand-camel: var(--camel);

	--accent-terra: var(--terra-600);
	--accent-sage:  var(--sage-600);
	--accent-malva: var(--malva-600);
	--accent:       var(--terra-600);    /* acento decorativo por defecto */

	--text-heading:  var(--ink-900);
	--text-body:     var(--ink-700);
	--text-muted:    var(--ink-500);
	--text-on-brand: #FBF8F2;            /* casi-blanco sobre oro/camel */
	--text-on-accent:#FFFFFF;            /* casi-blanco sobre terra/sage/malva */
	--text-label:    var(--gold-600);    /* labels de producto con tracking */
	--text-link:     var(--terra-600);

	--border-subtle: var(--line);
	--border-card:   var(--line-warm);
	--border-gold:   var(--gold-300);

	--focus-ring: color-mix(in srgb, var(--terra-600) 55%, transparent);

	/* ===== TIPOGRAFÍA ==================================================== */

	/* --- Familias (sustituto libre → fuente REAL de marca) -------------- */
	--font-display:      "Erotique Alternate Trial", "Playfair Display", serif; /* Erotique REAL self-hosted (Playfair de respaldo) */
	--font-sans:         "Bicyclette", "Segoe UI", system-ui, sans-serif;    /* Bicyclette REAL self-hosted (nav, labels, botones, precios) */
	--font-script:       "Caveat", "Segoe Script", cursive;                  /* → Buffalo (tagline manuscrito) */
	--font-body:         "Raleway", "Segoe UI", system-ui, sans-serif;       /* REAL — Raleway (descripciones, FAQ) */
	--font-serif-italic: "Libre Baskerville", Georgia, serif;                /* REAL — itálicas elegantes */
	--font-rounded:      var(--font-sans);                                   /* alias legacy → ahora Bicyclette/Jost */

	/* --- Pesos ----------------------------------------------------------- */
	--fw-light:    300;
	--fw-regular:  400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;

	/* --- Escala de tamaño (px) ------------------------------------------ */
	--text-2xs: 11px;
	--text-xs:  12px;
	--text-sm:  14px;
	--text-base:16px;
	--text-md:  18px;
	--text-lg:  22px;
	--text-xl:  28px;
	--text-2xl: 36px;
	--text-3xl: 48px;
	--text-4xl: 64px;
	--text-5xl: 84px;

	/* --- Interlineado --------------------------------------------------- */
	--leading-tight:   1.05;
	--leading-snug:    1.25;
	--leading-normal:  1.55;
	--leading-relaxed: 1.7;

	/* --- Tracking ------------------------------------------------------- */
	--tracking-display: 0.06em; /* títulos serif en mayúsculas */
	--tracking-label:   0.14em; /* captions de producto        */
	--tracking-eyebrow: 0.22em; /* eyebrow "ATELIER DE AROMAS"  */
	--tracking-body:    0;

	/* --- Roles compuestos (font shorthand) ------------------------------ */
	--type-display: var(--fw-semibold) var(--text-3xl)/var(--leading-tight) var(--font-display); /* títulos catálogo MAYÚSCULAS */
	--type-title:   var(--fw-semibold) var(--text-2xl)/1.08 var(--font-display);                 /* ★ títulos serif en Title-Case */
	--type-script:  var(--fw-bold) var(--text-2xl)/1.1 var(--font-script);                       /* tagline manuscrito */
	--type-eyebrow: var(--fw-medium) var(--text-xs)/1.3 var(--font-sans);                        /* eyebrow con tracking */
	--type-label:   var(--fw-semibold) var(--text-sm)/1.3 var(--font-sans);                      /* label UI con tracking */
	--type-italic:  italic var(--fw-regular) var(--text-lg)/1.2 var(--font-serif-italic);        /* "Nombre del cliente" */
	--type-body:    var(--fw-regular) var(--text-base)/var(--leading-normal) var(--font-body);   /* Raleway */

	/* ===== ESPACIADO, RADIOS, BORDES, SOMBRAS, MOVIMIENTO =============== */

	/* --- Escala de espaciado (base 4px) --------------------------------- */
	--space-0:  0;
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  20px;
	--space-6:  24px;
	--space-8:  32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;

	/* --- Radios --------------------------------------------------------- */
	--radius-xs:   6px;
	--radius-sm:   10px;
	--radius-md:   16px;  /* inputs, tarjetas pequeñas      */
	--radius-lg:   22px;  /* ★ squircle de foto de producto */
	--radius-xl:   32px;  /* paneles hero                   */
	--radius-pill: 999px; /* ★ pills de precio y botones    */

	/* --- Bordes --------------------------------------------------------- */
	--border-w:        1px;
	--border-w-2:      1.5px;
	--border-hair:     1px solid var(--line);
	--border-gold-hair:1px solid var(--gold-300);

	/* --- Sombras · cálidas y de bajo contraste -------------------------- */
	--shadow-xs:    0 1px 2px rgba(110, 87, 54, 0.06);
	--shadow-sm:    0 2px 8px rgba(110, 87, 54, 0.08);
	--shadow-md:    0 8px 24px rgba(110, 87, 54, 0.10);
	--shadow-lg:    0 18px 48px rgba(110, 87, 54, 0.14);
	--shadow-pill:  0 4px 14px rgba(110, 87, 54, 0.18);
	--shadow-photo: 0 10px 30px rgba(59, 52, 43, 0.16); /* tarjetas de producto */

	/* --- Máximos de layout ---------------------------------------------- */
	--container:        1200px;
	--container-narrow: 820px;
	--post:             1080px;

	/* --- Movimiento ----------------------------------------------------- */
	--ease-out:    cubic-bezier(0.23, 1, 0.32, 1);     /* ease-out fuerte (Emil) */
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* movimiento on-screen */
	--ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast:    140ms;
	--dur:         220ms;
	--dur-slow:    380ms;
	--hover-lift:  translateY(-3px);
	--press-scale: scale(0.97);
}