:root {
  --wm-cream-1: #fff8e6;
  --wm-cream-2: #f6e7c8;
  --wm-wood-1: #c98f5a;
  --wm-wood-2: #8a552c;
  --wm-gold: #f2c141;
  --wm-sage: #879a63;
  --wm-plum: #8d6197;
  --wm-coral: #e98978;
  --wm-ink: #3d3226;
  --wm-radius-card: 22px;
  --wm-radius-panel: 34px;
  --wm-touch-min: 48px;
  --wm-touch-main: 60px;
  --wm-gap-1: 8px;
  --wm-gap-2: 16px;
  --wm-gap-3: 24px;
  --wm-motion-press: 120ms;
  --wm-motion-flip: 300ms;
  --wm-motion-result: 900ms;
  --wm-motion-celebrate: 2400ms;
  --wm-shadow-card: 0 6px 0 rgb(138 85 44 / 0.3), 0 12px 24px rgb(61 50 38 / 0.16);
  --wm-focus-ring: 0 0 0 4px rgb(255 248 230 / 0.95), 0 0 0 8px rgb(242 193 65 / 0.9);
}

.wm-touch-target {
  min-width: var(--wm-touch-min);
  min-height: var(--wm-touch-min);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.wm-touch-target:active {
  transform: translateY(2px) scale(0.96);
  transition: transform var(--wm-motion-press) ease-out;
}

.wm-touch-target:focus-visible {
  outline: none;
  box-shadow: var(--wm-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}