/* ---------------------------------------------------
   Casa Bruma — tokens de diseño
   Paleta:
     --paper       #FBF7F0  fondo cálido tipo papel
     --ink         #211F1A  texto principal, casi negro
     --jade        #2E7D5B  acento principal (CTA, enlaces)
     --jade-dark   #235E45  hover del acento
     --jade-light  #6FCBA0  acento sobre fondo oscuro (footer)
     --clay        #C1552F  acento secundario (precios, numeración)
--------------------------------------------------- */

:root {
  --paper: #FBF7F0;
  --ink: #211F1A;
  --jade: #2E7D5B;
  --jade-dark: #235E45;
  --jade-light: #6FCBA0;
  --clay: #C1552F;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
}

.font-serif {
  font-family: 'Fraunces', ui-serif, Georgia, serif;
}

/* Los colores de marca (paper, ink, jade, clay) ahora están registrados
   directamente en la configuración de Tailwind (ver <script> en index.html),
   así que Tailwind genera él solo las clases bg-*, text-*, border-*
   — incluyendo las variantes con opacidad como text-paper/70 o border-ink/10 —
   en cualquier parte del sitio. Ya no hace falta definirlas a mano aquí. */

.font-600 { font-weight: 600; }

/* Oculta la barra de scroll horizontal de categorías sin perder el gesto de swipe */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Foco visible accesible, coherente con el acento de marca */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 2px;
}

/* Respeta la preferencia de movimiento reducido del usuario */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Pequeña animación de entrada para el modal (único momento de movimiento orquestado) */
#product-modal[data-open="true"] #modal-backdrop {
  animation: fade-in 0.18s ease-out;
}
#product-modal[data-open="true"] .modal-panel-anim {
  animation: sheet-up 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }