/* ---------------------------------------------------
   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;
}

.bg-paper   { background-color: var(--paper); }
.text-ink   { color: var(--ink); }
.text-jade  { color: var(--jade); }
.text-jade-light { color: var(--jade-light); }
.text-clay  { color: var(--clay); }
.bg-jade    { background-color: var(--jade); }
.bg-jade-dark:hover { background-color: var(--jade-dark); }
.border-jade { border-color: var(--jade); }
.bg-ink     { background-color: var(--ink); }

.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; } }