/* 8px base with 2/4/12 sub-tokens for fine work. */
:root{
  --space-xxs:2px;
  --space-xs:4px;
  --space-sm:8px;
  --space-md:12px;
  --space-lg:16px;
  --space-xl:24px;
  --space-xxl:32px;
  --space-huge:64px;

  /* Semantic */
  --pad-button:var(--space-sm) var(--space-lg);   /* 8px 16px — never tighter */
  --pad-input:var(--space-sm) var(--space-md);    /* 8px 12px */
  --pad-card:var(--space-xxl);                    /* 32px feature/pricing cards */
  --pad-card-mockup:var(--space-xl);              /* 24px dashboard mockups */
  --pad-nav:var(--space-lg) var(--space-xl);
  --pad-footer:var(--space-huge) var(--space-xl);
  --section-gap:96px;                             /* marketing section rhythm */
  --section-pad-marketing:80px;
  --section-pad-app:40px;
  --container-max:1200px;
}