/* ============================================================
   SPACING — base unit 8px. Structural layout snaps to 8/12/16/24.
   Sub-base values exist for tight typographic adjustment only.
   Section padding of 80px gives every product tile its pedestal of air.
   ============================================================ */
:root {
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  17px;   /* matches body size — the universal rhythm constant */
  --space-lg:  24px;
  --space-xl:  32px;
  --space-xxl: 48px;
  --space-section: 80px; /* vertical padding inside a full-bleed tile */

  /* semantic */
  --pad-card: var(--space-lg);     /* 24px inside utility cards */
  --pad-tile: var(--space-section);/* 80px inside product tiles */
  --gutter-grid: var(--space-lg);  /* 20–24px between utility cards */

  /* containers */
  --container-text: 980px;   /* text-heavy editorial sections */
  --container-grid: 1440px;  /* product / utility grids (content lock) */
}