/* Design tokens, built from design-system/tokens/*.css (source of truth). Rebuild with wp-scripts/build-tokens.sh. */
/* ─────────────────────────────────────────────
   Floristería El Tulipán: Color Tokens

   Fuente: Manual de Identidad 2022 (naranja +
   verde) + la extensión rojo aprobada por Gloria
   el 2026-06-30. Los tres colores no compiten
   porque cada uno tiene un rol fijo:

     rojo    = marca y romance
     verde   = acción (comprar, WhatsApp)
     naranja = realce, con cuentagotas

   Los hex de marca están verificados contra el
   logo (tulipan-logo.svg trae exactamente
   #F7A826 y #4DAF50) y contra el sitio en vivo.
───────────────────────────────────────────── */

:root {

  /* ── Marca ── */
  --rojo:           #E63946;   /* identidad + romance */
  --naranja:        #F7A826;   /* realce (color del logo) */
  --verde:          #4DAF50;   /* verde del logo */
  --verde-accion:   #2D5A3D;   /* verde profundo: botones con texto blanco */
  --blanco:         #FFFFFF;

  /* ── Derivados funcionales ── */
  --rojo-profundo:  #D92D3C;   /* mismo tono, más contraste (4.8:1). Va en las dos
                                  direcciones: texto blanco sobre rojo, y rojo sobre
                                  blanco (precios). El --rojo da 4.2:1 y no llega a AA. */
  --rojo-suave:     #FDECEE;   /* fondos de acento, chips de ocasión */
  --naranja-hover:  #E09417;
  --naranja-suave:  #FEF3DE;   /* fondos de badge */
  --verde-hover:    #24492F;
  --verde-pale:     #E8F0E9;   /* fondos de confianza / entrega */

  /* ── Neutros cálidos ──
     No son colores de marca. Van tibios (no gris
     puro) para armonizar con el naranja dorado;
     el gris frío apaga las flores en foto. */
  --tinta:          #2B2622;   /* texto principal */
  --tinta-70:       #5C544D;   /* texto secundario */
  --tinta-45:       #8A837A;   /* texto muted */
  --crema:          #FBF7F2;   /* fondo de página cálido */
  --crema-oscura:   #F0E8DC;   /* separadores de sección */
  --linea:          rgba(43, 38, 34, 0.12);
  --linea-on-dark:  rgba(255, 255, 255, 0.16);

  /* ── Terceros ── */
  --whatsapp:       #25D366;
  --whatsapp-hover: #1EBE5D;

  /* ── Semánticos ── */
  --exito:          #2D5A3D;
  --alerta:         #C0392B;

  /* ── Aliases de rol ── */
  --color-marca:            var(--rojo);            /* header, precios */
  --marca-label:            #CE2733;                /* eyebrows y etiquetas chicas: el rojo de
                                                       marca da 3.9-4.2:1 a 11-12px y no pasa AA;
                                                       ni el rojo profundo alcanza sobre crema */
  --color-marca-contraste:  var(--rojo-profundo);   /* cuando lleva texto blanco encima */
  --color-accion:           var(--verde-accion);    /* TODO botón de comprar/ordenar */
  --color-accion-hover:     var(--verde-hover);
  --color-realce:           var(--naranja);         /* badges, hovers, íconos chicos */

  --color-bg:               var(--blanco);
  --color-bg-calido:        var(--crema);
  --color-bg-card:          var(--blanco);
  --color-bg-confianza:     var(--verde-pale);
  --color-bg-acento:        var(--rojo-suave);

  --color-texto:            var(--tinta);
  --color-texto-sec:        var(--tinta-70);
  --color-texto-muted:      var(--tinta-45);
  --color-texto-on-dark:    rgba(255, 255, 255, 0.94);
  --color-texto-on-naranja: var(--tinta);           /* NUNCA blanco sobre naranja */

  --color-border:           var(--linea);
  --color-precio:           var(--rojo);
}
/* ─────────────────────────────────────────────
   Floristería El Tulipán: Typography Tokens

   · Poppins: todo: titulares, cuerpo, UI. Es la
     tipografía del wordmark "FLORISTERIA", así
     que la marca y la interfaz hablan igual.
   · Mercury Regular: SOLO el logotipo
     "El Tulipán". Es de Hoefler&Co (comercial),
     no se empaqueta acá y no se usa en web.

   Titulares en sentence case y voseo nica. El
   registro cambia por ocasión (ver ocasion.css),
   no por tipografía: una sola familia, distinto
   peso y aire.
───────────────────────────────────────────── */


:root {

  /* ── Familias ── */
  --font-sans: 'Poppins', -apple-system, system-ui, sans-serif;
  --font-logo: 'Mercury', Georgia, serif;   /* solo logotipo, no bundleado */

  /* ── Escala ── */
  --text-2xs:  0.68rem;
  --text-xs:   0.75rem;
  --text-sm:   0.84rem;
  --text-base: 0.94rem;
  --text-md:   1rem;
  --text-lg:   1.15rem;
  --text-xl:   1.35rem;
  --text-2xl:  1.65rem;
  --text-3xl:  2.1rem;
  --text-display: clamp(2.2rem, 4vw, 3.1rem);
  --text-hero:    clamp(2.8rem, 5.5vw, 4.2rem);

  /* ── Pesos ──
     Poppins Medium (500) es el peso del wordmark:
     es el default de la marca, no el 400. */
  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ── Interlineado ── */
  --leading-tight:  1.12;
  --leading-snug:   1.28;
  --leading-normal: 1.6;
  --leading-suelto: 1.75;   /* copy de simpatía: más aire */

  /* ── Tracking ── */
  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.11em;   /* eyebrows y etiquetas chicas */
}
/* ─────────────────────────────────────────────
   Floristería El Tulipán: Spacing, Radius & Shape

   Base 4px, igual que el sitio en vivo. Los radios
   salen de lo que ya está publicado: botones
   píldora (26px en vivo → pill), cajas 5px.

   Las flores ya traen todo el movimiento visual,
   así que la estructura va tranquila: pocas
   sombras, bordes suaves, mucho aire.
───────────────────────────────────────────── */

:root {

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

  /* ── Radios ── */
  --r-sm:   5px;     /* inputs, chips (valor en vivo) */
  --r-md:   10px;    /* cards de producto */
  --r-lg:   18px;    /* secciones, imágenes grandes */
  --r-pill: 999px;   /* todos los botones */

  /* ── Contenedor ── */
  --ancho-max:  1240px;
  --ancho-texto: 62ch;

  /* ── Proporciones de foto ──
     El producto es la flor: la foto manda y va
     siempre en vertical o cuadrada, nunca
     recortada en banner. */
  --ratio-producto: 4 / 5;
  --ratio-hero:     3 / 2;
}
/* ─────────────────────────────────────────────
   Floristería El Tulipán: Shadow Tokens
   Sombras tibias (teñidas de tinta cálida), nunca
   gris neutro: el gris frío ensucia el color de
   las flores en las fotos de producto.
───────────────────────────────────────────── */

:root {
  --shadow-sm: 0 1px 3px rgba(43, 38, 34, 0.06);
  --shadow-md: 0 4px 16px rgba(43, 38, 34, 0.08);
  --shadow-lg: 0 8px 32px rgba(43, 38, 34, 0.12);
  --shadow-xl: 0 16px 48px rgba(43, 38, 34, 0.16);

  /* Solo para el CTA primario, con moderación */
  --shadow-accion: 0 6px 18px rgba(45, 90, 61, 0.26);
}
/* ─────────────────────────────────────────────
   Floristería El Tulipán: Motion Tokens
   El movimiento de la marca es el de una flor que
   abre: empieza tranquilo, se asienta suave. Nada
   rebota, nada salta.
───────────────────────────────────────────── */

:root {
  --ease-flor:  cubic-bezier(0.22, 0.61, 0.36, 1);   /* entrada suave por defecto */
  --ease-hover: cubic-bezier(0.25, 0.9, 0.3, 1);
  --dur-fast:   160ms;
  --dur-base:   280ms;
  --dur-slow:   460ms;

  /* Lift estándar de card de producto */
  --lift-card: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ─────────────────────────────────────────────
   Floristería El Tulipán: Ocasión (signature)

   La firma de El Tulipán no es una forma, es el
   registro: la misma marca felicita un cumpleaños
   y acompaña un velorio, y no puede sonar igual
   en los dos casos.

   Poné data-ocasion en el contenedor y el acento,
   el fondo y el ritmo se ajustan solos:

     <section data-ocasion="simpatia"> … </section>

   Reglas duras:
   · simpatia   → nunca naranja, nunca signos de
                  exclamación, nunca badge de oferta,
                  nunca precio como titular.
   · celebracion→ el naranja puede aparecer, pero
                  solo como realce (badge, ícono).
   · Si no se declara ocasión, se hereda "romance",
     que es el registro por defecto de la marca.
───────────────────────────────────────────── */

:root {
  /* Default: romance (rosas, aniversarios, "porque sí") */
  --ocasion-acento:      var(--rojo);
  --ocasion-bg:          var(--rojo-suave);
  --ocasion-texto:       var(--tinta);
  --ocasion-peso-titulo: var(--font-semibold);
  --ocasion-tracking:    var(--tracking-normal);
}

[data-ocasion="celebracion"] {
  /* cumpleaños, graduación, nuevo bebé, felicitaciones */
  --ocasion-acento:      var(--rojo);
  --ocasion-bg:          var(--naranja-suave);
  --ocasion-realce:      var(--naranja);
  --ocasion-peso-titulo: var(--font-semibold);
}

[data-ocasion="romance"] {
  /* san valentín, aniversario, amor y amistad */
  --ocasion-acento:      var(--rojo);
  --ocasion-bg:          var(--rojo-suave);
  --ocasion-peso-titulo: var(--font-semibold);
}

[data-ocasion="gratitud"] {
  /* día de la madre, del maestro, agradecimientos */
  --ocasion-acento:      var(--naranja);
  --ocasion-bg:          var(--naranja-suave);
  --ocasion-peso-titulo: var(--font-medium);
}

[data-ocasion="simpatia"] {
  /* condolencias, coronas, arreglos fúnebres */
  --ocasion-acento:      var(--verde-accion);
  --ocasion-bg:          var(--crema);
  --ocasion-texto:       var(--tinta-70);
  --ocasion-peso-titulo: var(--font-regular);
  --ocasion-tracking:    var(--tracking-wide);   /* más aire, lectura más lenta */
}

/* El realce solo existe donde la ocasión lo permite.
   En simpatía y romance queda apagado a propósito. */
[data-ocasion="simpatia"],
[data-ocasion="romance"] {
  --ocasion-realce: transparent;
}