/* Mr. J's Barbershop — Spacing, radius & layout rhythm.
   The concept file lays sections on a 64px gutter with 30px inner padding;
   cards round at 12px, pills at 999px, avatars at 100px. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 30px;   /* card inner padding in source */
  --space-7: 40px;
  --space-8: 64px;   /* section gutter in source */
  --space-9: 96px;
  --space-10: 128px;

  /* Radii (exact from concept file) */
  --radius-sm: 5px;    /* panels */
  --radius-md: 12px;   /* image cards */
  --radius-lg: 16px;
  --radius-pill: 999px;/* buttons */
  --radius-circle: 100px;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1440px;
  --header-h: 88px;
}