/* The Observer — spacing & grid
   Base unit 4px; the file's own grid system (Breakpoints & Grid page) is
   the authority on margin/gutter/column counts per breakpoint. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* Section divider heights */
  --divider-main: 8px;
  --divider-secondary: 4px;

  /* Grid breakpoints (Tamagui naming from the source) */
  --bp-sm: 360px;   /* sm: 360-653px  — margin 16, gutter 8,  columns 4  */
  --bp-md: 654px;   /* md: 654-899px  — margin 24, gutter 16, columns 12 */
  --bp-lg: 900px;   /* lg: 900-1023px — margin 24, gutter 16, columns 12 */
  --bp-xl: 1024px;  /* xl: 1024-1279px — margin auto, gutter 24, columns 12, max 1280px */
  --bp-xxl: 1280px; /* 1280+ — margin 48, gutter 24, columns 12, max content 1344px */

  --margin-sm: 16px;  --gutter-sm: 8px;
  --margin-md: 24px;  --gutter-md: 16px;
  --margin-lg: 24px;  --gutter-lg: 16px;
  --margin-xl: 24px;  --gutter-xl: 24px;
  --margin-xxl: 48px; --gutter-xxl: 24px;

  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-pill: 30px;
}