/* Remoby — Spacing, radii, layout tokens
   Padding scale and corner radii are lifted from the file's variable
   collections. The site is a 1440 canvas with 120px page margins and
   large 20px-radius section cards on a 20px outer gutter. */

:root {
  /* ---- Spacing scale (px) ---- */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
  --space-64: 64px;
  --space-80: 80px;
  --space-100: 100px;
  --space-120: 120px;

  /* ---- Corner radii ---- */
  --radius-4: 4px;    /* tags, chips */
  --radius-6: 6px;
  --radius-8: 8px;    /* buttons, inputs */
  --radius-10: 10px;
  --radius-12: 12px;  /* icon tiles */
  --radius-16: 16px;  /* small cards */
  --radius-18: 18px;
  --radius-20: 20px;  /* hero, feature cards, footer, section shells */
  --radius-pill: 99px;

  /* ---- Layout ---- */
  --page-max: 1440px;
  --page-margin: 120px;   /* desktop content inset (header/footer) */
  --page-gutter: 20px;    /* outer gutter around section cards */
  --header-height: 88px;

  /* ---- Borders ---- */
  --border-width: 1px;

  /* ---- Elevation (used sparingly — the system is flat + inset-ring based) ---- */
  --ring: inset 0 0 0 1px var(--border-default);
  --ring-outer: 0 0 0 1px var(--border-default);
}