:root {
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  22px;
  --radius-pill: 999px;
  --border-width:      1px;
  --border-width-thick: 1.5px;
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 2px 4px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.07);
  --shadow-lg:  0 4px 8px rgba(15, 23, 42, 0.05), 0 12px 28px rgba(15, 23, 42, 0.10);
  --shadow-xl:  0 12px 24px rgba(15, 23, 42, 0.10), 0 24px 56px rgba(15, 23, 42, 0.14);
  --ring-offset: 2px;
  --ring: 0 0 0 3px var(--brand-ring);
}