/* ST Revival — Spacing, radius, shadow, motion */
:root {
  --sp-0:   0;     /* @kind spacing */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  --border-w-hair:  1px;
  --border-w-1:     2px;
  --border-w-2:     3px;
  --border-w-thick: 4px;

  --shadow-none:     none;
  --shadow-sm:       0 1px 0 rgba(11,16,36,0.08);
  --shadow-md:       0 2px 0 rgba(11,16,36,0.15);
  --shadow-hard:     4px 4px 0 #0B1024;
  --shadow-hard-red: 4px 4px 0 #FF000A;
  --shadow-inset:    inset 0 -2px 0 rgba(11,16,36,0.08);

  --overlay-scrim: rgba(11,16,36,0.72); /* @kind color */

  /* Motion */
  --dur-fast:   90ms;  /* @kind other */
  --dur-base:   160ms; /* @kind other */
  --dur-slow:   260ms; /* @kind other */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);     /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */

  /* Layout */
  --container-narrow: 720px;  /* @kind other */
  --container-base:   1080px; /* @kind other */
  --container-wide:   1280px; /* @kind other */
  --container-full:   1440px; /* @kind other */

  /* Z */
  --z-nav:     40;  /* @kind other */
  --z-overlay: 60;  /* @kind other */
  --z-modal:   80;  /* @kind other */
  --z-toast:   100; /* @kind other */
}