/* Corner radii and border widths.
   The radius set is broad and used semantically: 3-6 for chips and keycaps,
   8-10 for controls, 15-20 for panels, 25-30 for full-width surfaces. */
:root{
  --radius-xs:3px;
  --radius-sm:4px;
  --radius-md:5px;
  --radius-lg:6px;
  --radius-control:8px;   /* buttons, menu items, dropdowns */
  --radius-field:10px;    /* text inputs */
  --radius-popover:12px;  /* menus, tooltips */
  --radius-panel:15px;    /* inner panels */
  --radius-card:18px;     /* CTA blocks, bordered cards */
  --radius-surface:20px;  /* bento tiles */
  --radius-container:25px;/* full-width card grids */
  --radius-xl:30px;
  --radius-pill:100px;

  /* Hairline. The Figma import transcribes every 1px stroke as 1.004px — a
     scrape artefact of the capture scale, not a design decision. Use 1px. */
  --border-width:1px;
  --border-width-source:1.004px;
}