:root {
  /* spacing scale, use these for all NEW spacing you write */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  /* radii */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
  /* focus ring */
  --focus-ring: 0 0 0 3px rgba(240,192,64,0.35);
  /* minimum touch target */
  --tap: 44px;
}
/* one global keyboard focus treatment for the whole platform */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #F0C040;
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:where(a, button, input, select, textarea):focus:not(:focus-visible) {
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}