/* ============================================================
   Superhairpieces — Spacing & radii
   4px base unit. Radii from the SHP component set.
   ============================================================ */

:root {
  /* Spacing scale (4px base) */
  --space-0:   0px;
  --space-2:   2px;
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;
  --space-56:  56px;
  --space-64:  64px;
  --space-80:  80px;
  --space-96:  96px;
  --space-128: 128px;
  --space-160: 160px;
  --space-192: 192px;
  --space-256: 256px;

  /* Corner radii — squared system: controls are sharp (0),
     only raised / floating surfaces get a soft 4–8px. */
  --radius-xs:   0px;  /* tags, chips, small controls */
  --radius-sm:   0px;  /* buttons, inputs */
  --radius-md:   4px;  /* nested surfaces, small overlays, alerts */
  --radius-lg:   8px;  /* cards, panels, drawers, modals (overlay) */
  --radius-xl:   8px;
  --radius-2xl:  8px;  /* large containers / wells */
  --radius-full: 1000px; /* genuinely circular: avatar, switch, count badge */

  /* Hairline */
  --border-width: 1px;
}