:root{
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;   /* the card radius */
  --radius-xl:24px;
  --radius-2xl:32px;
  --radius-pill:999px;

  --border-w:1px;
  --border-w-strong:1.5px;

  --shadow-0:none;
  --shadow-1:0 1px 2px rgba(13,12,28,.06), 0 1px 1px rgba(13,12,28,.04);
  --shadow-2:0 2px 4px rgba(13,12,28,.05), 0 8px 20px -10px rgba(13,12,28,.14);
  --shadow-3:0 16px 40px -12px rgba(13,12,28,.20);
  --shadow-inset-hairline:inset 0 0 0 1px var(--border-hairline);
  --shadow-brand-glow:0 10px 30px -12px rgba(84,75,154,.55);

  --blur-scrim:saturate(1.4) blur(14px); /* @kind other */
}