/* Geometry and elevation. Five radii, four elevations. Dark UI leans on borders, light on shadow. */
:root{
  --radius-xs:6px;
  --radius-sm:8px;      /* chips, small controls */
  --radius-md:10px;     /* buttons, inputs */
  --radius-lg:14px;     /* cards */
  --radius-xl:20px;     /* panels, modals, media */
  --radius-2xl:28px;    /* hero media, feature blocks */
  --radius-pill:999px;
  --radius-circle:50%;

  --border-hairline:1px;
  --border-emphasis:1.5px;

  /* Light-surface elevation */
  --elev-1:0 1px 2px rgba(12,11,16,.06);
  --elev-2:0 2px 4px rgba(12,11,16,.05), 0 8px 16px -8px rgba(12,11,16,.14);
  --elev-3:0 4px 8px rgba(12,11,16,.06), 0 18px 32px -12px rgba(12,11,16,.18);
  --elev-4:0 8px 16px rgba(12,11,16,.08), 0 32px 56px -16px rgba(12,11,16,.24);
  /* Dark-surface elevation */
  --elev-dark-1:0 1px 0 rgba(255,255,255,.04) inset;
  --elev-dark-2:0 8px 24px -12px rgba(0,0,0,.7);
  --elev-dark-3:0 24px 64px -24px rgba(0,0,0,.85);
  /* Brand glow, used sparingly on primary CTAs and active data points */
  --glow-brand:0 8px 24px -10px rgba(109,48,167,.65);
}