/* Reckon corner radii. Everything derives from --radius: 10px.
   Nested surfaces subtract 1px so an inner highlight tracks the border. */
:root{
  --radius:0.625rem;                    /* 10px */
  --radius-xs:calc(var(--radius) - 6px);  /* 4px  — chips, tiny indicators */
  --radius-sm:calc(var(--radius) - 4px);  /* 6px  — menu items, badges */
  --radius-md:calc(var(--radius) - 2px);  /* 8px  — xs/sm buttons, tooltips */
  --radius-lg:var(--radius);              /* 10px — buttons, inputs, popups */
  --radius-xl:calc(var(--radius) + 4px);  /* 14px — alerts, toolbars, panels */
  --radius-2xl:1rem;                      /* 16px — cards, dialogs */
  --radius-full:9999px;
  /* inner radius for a 1px-inset highlight layer */
  --radius-lg-inner:calc(var(--radius-lg) - 1px);
  --radius-xl-inner:calc(var(--radius-xl) - 1px);
  --radius-2xl-inner:calc(var(--radius-2xl) - 1px);
}
