/* 4px base grid. Section rhythm is generous — the brand is content-first with breathing room. */

:root {
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* Responsive trio from DESIGN.md §8 — reassigned at each breakpoint below. */
  --pad-responsive: 24px;
  --gap-responsive: 24px;
  --margin-responsive: 32px;

  /* Section rhythm */
  --section-gap: var(--space-24);
  --section-gap-tight: var(--space-16);
  --block-gap: var(--space-10);
  --stack-gap: var(--space-4);
}

@media (max-width: 1023px) {
  :root { --pad-responsive: 20px; --gap-responsive: 20px; --margin-responsive: 28px; --section-gap: 80px; }
}
@media (max-width: 767px) {
  :root { --pad-responsive: 16px; --gap-responsive: 16px; --margin-responsive: 24px; --section-gap: 64px; }
}
@media (max-width: 479px) {
  :root { --margin-responsive: 16px; --section-gap: 56px; }
}