/* Corner radius scale in px, and the shape values the skins read
   (src/style/tokens.ts `shape`): the web row in full, from the v4 hand-off's renderer
   (10 on controls and fields, 16 on cards and menus, 20 on dialogs, 22 on sheets, 12 on
   tiles, 5 on the checkbox box, every capsule a pill); and three native values, the iOS
   capsule control and the 12 card on iOS and on Android (the M3 medium shape). The full
   native rows are in DESIGN.md's Shapes table. */
:root{
  --radius-none:0px;--radius-sm:2px;--radius:4px;--radius-md:6px;--radius-lg:8px;
  --radius-xl:12px;--radius-2xl:16px;--radius-3xl:24px;--radius-full:9999px;

  --radius-control:10px;   /* web button, icon button, menu row, nav highlight (capsules read --radius-pill) */
  --radius-field:10px;    /* web text field, select, autocomplete */
  --radius-card:16px;     /* web card surface */
  --radius-dialog:20px;   /* web dialog, alert dialog */
  --radius-menu:16px;     /* web menu, popover, select list */
  --radius-sheet:22px;    /* web sheet, drawer, app shell */
  --radius-tile:12px;     /* web icon tile, swatch, alert banner */
  --radius-checkbox:5px;  /* web checkbox box */
  --radius-control-ios:var(--radius-pill); /* shape.ios.control: every iOS control is a capsule */
  --radius-card-ios:12px;
  --radius-card-android:12px;
  --radius-pill:9999px;   /* web pill button, chip, badge, toast; iOS capsule, M3 stadium */
}