/**
 * Walon — Design tokens compartidos por el modal de carrito, la página de
 * carrito y el checkout. Complementa (no reemplaza) los tokens tipográficos
 * ya definidos en astra-child/inc/css/walon-fonts.css (--w-font-head,
 * --w-font-body, --w-wt-*).
 */
:root {
  /* Superficies */
  --walon-ink: #0f0f10;
  --walon-ink-soft: #3a3a3d;
  --walon-surface: #ffffff;
  --walon-surface-muted: #f6f7f8;
  --walon-surface-sunken: #eef0f1;
  --walon-border: #e4e5e7;
  --walon-border-strong: #cfd1d4;

  /* Acento y estado (mismos valores que ya usaba el plugin) */
  --walon-accent: #0f0f10;
  --walon-success: #00b050;
  --walon-success-bg: #e9f9ef;
  --walon-danger: #e31919;
  --walon-danger-bg: #fdecec;

  /* Radios — jerarquía intencional, no todo redondeado por igual:
     las fotos/imágenes usan un radio mínimo (más editorial, menos "ícono de app"),
     los controles (inputs/botones) un radio moderado, y solo contenedores
     grandes (modal, tarjetas) un radio algo mayor. Los pills siguen siendo pills. */
  --walon-radius-img: 4px;
  --walon-radius-xs: 6px;
  --walon-radius-sm: 8px;
  --walon-radius-md: 10px;
  --walon-radius-lg: 14px;
  --walon-radius-pill: 999px;

  /* Sombras (elevación) */
  --walon-shadow-1: 0 1px 3px rgba(15, 15, 16, 0.06), 0 1px 2px rgba(15, 15, 16, 0.04);
  --walon-shadow-2: 0 8px 24px rgba(15, 15, 16, 0.09), 0 2px 6px rgba(15, 15, 16, 0.06);
  --walon-shadow-3: 0 20px 48px rgba(15, 15, 16, 0.16), 0 6px 16px rgba(15, 15, 16, 0.08);

  /* Foco premium para inputs (anillo suave, no solo cambio de borde) */
  --walon-focus-ring: 0 0 0 4px rgba(15, 15, 16, 0.08);
  --walon-focus-ring-success: 0 0 0 4px rgba(0, 176, 80, 0.14);
  --walon-focus-ring-danger: 0 0 0 4px rgba(227, 25, 25, 0.12);

  /* Espaciado */
  --walon-space-xs: 6px;
  --walon-space-sm: 10px;
  --walon-space-md: 16px;
  --walon-space-lg: 24px;
  --walon-space-xl: 32px;

  /* Movimiento */
  --walon-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --walon-duration-fast: 0.18s;
  --walon-duration-base: 0.32s;
  --walon-duration-slow: 0.5s;
}

/* =========================================================
   Toast — notificaciones inline que reemplazan a alert()
========================================================= */
.walon-toast-stack {
  position: fixed;
  z-index: 1000010;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(92vw, 420px);
  pointer-events: none;
}

.walon-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--walon-ink);
  color: #fff;
  border-radius: var(--walon-radius-md);
  padding: 14px 16px;
  box-shadow: var(--walon-shadow-3);
  font-family: var(--w-font-body, "Neusa Next Pro", Arial, sans-serif);
  font-size: 14px;
  font-weight: var(--w-wt-medium, 500);
  line-height: 1.4;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity var(--walon-duration-base) var(--walon-ease),
    transform var(--walon-duration-base) var(--walon-ease);
}

.walon-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.walon-toast .walon-toast-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.walon-toast .walon-toast-icon svg {
  width: 100%;
  height: 100%;
}

.walon-toast.walon-toast-error {
  background: var(--walon-danger);
}

.walon-toast.walon-toast-success {
  background: var(--walon-success);
}

@media (max-width: 480px) {
  .walon-toast-stack {
    bottom: 16px;
  }
}