/* Octo Code — spacing, radius, container tokens. Base unit 4px. */
: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;
  --space-9: 64px;

  --section-gap: 24px;       /* between content sections */
  --section-gap-major: 48px; /* between major page sections */
  --card-grid-gap: 16px;

  --radius-sm: 3px;    /* checkboxes, small badges, inline code */
  --radius-md: 6px;    /* buttons, inputs, cards, dropdowns, modals */
  --radius-lg: 12px;   /* avatars, large promo cards */
  --radius-xl: 20px;   /* marketing hero, onboarding cards */
  --radius-full: 9999px; /* pills, chips, counters */

  --container-wide: 1280px;
  --container-content: 1012px;
  --container-narrow: 768px;
}