:root{
  --radius-xs:2px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:32px;
  --radius-xl:40px;
  --radius-pill:50px;
  --radius-full:9999px;

  /* semantic */
  --radius-input:var(--radius-md);
  --radius-card:var(--radius-lg);
  --radius-block:var(--radius-lg);
  --radius-hero:var(--radius-xl);
  --radius-button:var(--radius-pill);
  --radius-icon-button:var(--radius-full);
  --radius-tag:var(--radius-sm);

  --border-hairline:1px solid var(--hairline);
  --border-hairline-soft:1px solid var(--hairline-soft);
  --border-hairline-inverse:1px solid var(--hairline-inverse);
}