/* ============================================================
   Hudson Pay — Elevation, shadow & motion tokens
   Signature: cool blue-tinted shadows + inner top-glow on
   raised brand controls (mirrors the logomark sheen).
   ============================================================ */
:root {
  /* Outer elevation — cool, navy-tinted */
  --shadow-xs: 0 1px 2px rgba(36,20,97,0.05);
  --shadow-sm: 0 2px 8px rgba(36,20,97,0.06);
  --shadow-md: 0 10px 26px -8px rgba(36,20,97,0.12);
  --shadow-lg: 0 22px 48px -16px rgba(36,20,97,0.16);
  --shadow-xl: 0 36px 80px -24px rgba(36,20,97,0.22);

  /* Brand button glow — violet-tinted, soft */
  --shadow-brand:     0 8px 22px -6px rgba(110,58,224,0.42);
  --shadow-brand-lg:  0 16px 38px -10px rgba(110,58,224,0.46);
  --inner-sheen:      inset 0 1px 0 rgba(255,255,255,0.32); /* @kind shadow */

  /* Focus ring */
  --ring: 0 0 0 4px var(--ring-focus);

  /* Motion — calm, precise, slight ease-out */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */

  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */
  --dur-slower: 520ms; /* @kind other */

  /* Slow rotation for the dashed-ring brand motif */
  --spin-dur: 22s; /* @kind other */
}

@keyframes hp-spin {
  to { transform: rotate(360deg); }
}
@keyframes hp-spin-rev {
  to { transform: rotate(-360deg); }
}