/* Shared semantic values. Route styles may override component-local values. */
:root {
  --iel-color-ink: #3b3b3b;
  --iel-color-black: #000;
  --iel-color-white: #fff;
  --iel-color-brand: #f00;
  --iel-color-focus: #a32424;
  --iel-color-chat: #311901;
  --iel-radius-pill: 999px;
  --iel-motion-fast: 180ms;
  --iel-motion-panel: 240ms;
  --iel-motion-location: 140ms;
  --iel-motion-contact: 180ms;
  --iel-motion-reveal: 220ms;
  --iel-motion-scene: 240ms;
  --iel-motion-scene-in: 240ms;
  --iel-motion-sequence-step: 80ms;
  --iel-motion-stagger-step: 100ms;
  --iel-motion-card: 500ms;
  --iel-motion-reveal-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --iel-motion-distance: 32px;
  --iel-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (width <= 767px) {
  :root {
    --iel-motion-distance: 20px;
    --iel-motion-reveal: 180ms;
    --iel-motion-scene: 220ms;
    --iel-motion-stagger-step: 80ms;
    --iel-motion-card: 420ms;
    --iel-motion-scene-in: 220ms;
  }
}