// :where() keeps tokens at zero specificity so consumer overrides win; see _colors.scss.
:where(:root) {
  --radius-none: 0;
  --radius-xs: 0.125rem; //  2px
  --radius-sm: 0.25rem; //  4px
  --radius-md: 0.375rem; //  6px
  --radius-lg: 0.5rem; //  8px
  --radius-xl: 0.75rem; // 12px
  --radius-2xl: 1rem; // 16px
  --radius-3xl: 1.5rem; // 24px
  --radius-full: 9999px; // pill / circle

  --border-width-none: 0;
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;

  // Hit-target box for icon buttons (clear / close / dismiss / toggle). em-based
  // so it scales with the host component's size; since all sized components share
  // a font-size per tier, this is also consistent across components at a tier
  // (md = 1.75 * 16px = 28px).
  --ea-icon-button-size: 1.75em;
}