/*
  Design tokens — Alquimia Dulce
  Paleta derivada del logo (rosa empolvado + negro cálido) ajustada
  para cumplir contraste AA en botones y texto.
*/
:root {
  /* Colores de marca */
  --color-primary: #A8506A;
  --color-primary-dark: #8C4058;
  --color-primary-soft: #F0C7D0;
  --color-secondary: #2B2222;
  --color-accent: #C9A15A;
  --color-background: #FBEEF1;
  --color-ivory: #F8F1E7;
  --color-surface: #FFFFFF;
  --color-text: #2B2222;
  --color-muted: #8A7679;
  --color-border: #F0D8DE;
  --color-border-ivory: #EBE0CE;
  --color-cherry: #B4293A;
  --color-whatsapp: #1EBE5D;
  --color-whatsapp-dark: #189B4C;

  /* Tipografia */
  --font-heading: "Playfair Display", "Georgia", serif;
  --font-body: "Work Sans", "Segoe UI", sans-serif;

  /* Escala tipografica fluida */
  --fs-xs: clamp(0.78rem, 0.74rem + 0.2vw, 0.85rem);
  --fs-sm: clamp(0.88rem, 0.84rem + 0.2vw, 0.95rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.05rem);
  --fs-lg: clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem);
  --fs-xl: clamp(1.4rem, 1.28rem + 0.6vw, 1.7rem);
  --fs-2xl: clamp(1.8rem, 1.6rem + 1vw, 2.4rem);
  --fs-3xl: clamp(2.2rem, 1.85rem + 1.75vw, 3.4rem);
  --fs-4xl: clamp(2.8rem, 2.1rem + 3.4vw, 5.2rem);

  /* Espaciado (base 4px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* Bordes — logica de radios, no "todo 24px":
     marco calido en fotografia (boutique, no tarjeta SaaS),
     4px en controles interactivos (botones, inputs),
     pill reservado solo para el boton flotante de WhatsApp y tags chicos. */
  --radius-photo: 18px;
  --radius-control: 4px;
  --radius-pill: 999px;
  --border-width: 1px;

  /* Sombras — uso minimo, solo donde separa capas reales
     (header al hacer scroll, boton flotante, fotografia). El resto del
     contenido se apoya en linea fina (--color-border), no en sombra. */
  --shadow-sm: 0 1px 3px rgba(43, 34, 34, 0.1);
  --shadow-md: 0 6px 20px rgba(43, 34, 34, 0.14);
  --shadow-lg: 0 14px 34px rgba(43, 34, 34, 0.18);
  --shadow-warm: 0 16px 32px rgba(168, 80, 106, 0.18);

  /* Layout */
  --container-max: 1180px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* Movimiento */
  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;
  --transition-slow: 420ms cubic-bezier(0.22, 1, 0.36, 1);

  --z-header: 100;
  --z-float: 90;
  --z-lightbox: 200;
}