:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 28px; --sp-7: 40px; --sp-8: 56px;

  --radius-sm: 4px;
  --radius-md: 6px;   /* default: buttons, chips, cards */
  --radius-lg: 8px;   /* panels, image frames */
  --radius-none: 0;   /* crisp rectangular variant */

  --hairline: 1px solid var(--border-hairline);
}