/* ─── MR.HOMES — Spacing Tokens ───────────────────────────────────────── */

:root {
  /* ── Base scale (4px grid) ── */
  --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-28:  112px;
  --space-32:  128px;
  --space-40:  160px;
  --space-48:  192px;
  --space-56:  224px;
  --space-64:  256px;

  /* ── Section rhythm ── */
  --section-padding-y:    var(--space-20);    /* 80px vertical section padding */
  --section-padding-y-lg: var(--space-40);    /* 160px for hero / marquee sections */
  --section-padding-x:    var(--space-8);     /* 32px side padding (mobile) */

  /* ── Layout containers ── */
  --container-xs:   480px;
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;
  --container-max:  var(--container-xl);

  /* ── Component internal spacing ── */
  --btn-padding-y-sm:  8px;
  --btn-padding-x-sm:  16px;
  --btn-padding-y-md:  12px;
  --btn-padding-x-md:  28px;
  --btn-padding-y-lg:  16px;
  --btn-padding-x-lg:  40px;
  --btn-padding-y-xl:  20px;
  --btn-padding-x-xl:  56px;

  --input-padding-y:   12px;
  --input-padding-x:   16px;

  --card-padding:      var(--space-8);
  --card-padding-sm:   var(--space-6);
}