/* 4px step: every space, and the one Tailwind's scale is derived from in the product. */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;
  --space-16:64px;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-full:999px;
  /* Named by role, so a card's corner changes everywhere at once. */
  --radius-control:var(--radius-sm);
  --radius-card:var(--radius-md);
  --radius-panel:var(--radius-lg);
  --radius-pill:var(--radius-full);

  --shadow-sm:0 1px 2px rgba(11,11,11,0.06);
  --shadow-md:0 4px 12px rgba(11,11,11,0.08);
  --shadow-lg:0 12px 32px rgba(11,11,11,0.12);

  --motion-fast:120ms; /* @kind other */
  --motion-base:200ms; /* @kind other */
  --motion-slow:320ms; /* @kind other */
  --motion-ease:cubic-bezier(0.4,0,0.2,1); /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{
  --motion-fast:0ms; /* @kind other */
  --motion-base:0ms; /* @kind other */
  --motion-slow:0ms; /* @kind other */
}}