/* ============================================================
   SiRR — Spacing, radii & layout tokens
   Calm, generous spacing for quiet luxury. 4px base unit.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) -------------------------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ---- Section rhythm ------------------------------------ */
  --section-pad-y:   var(--space-24);
  --section-pad-x:   var(--space-8);
  --content-gap:     var(--space-6);

  /* ---- Radii — restrained, mostly soft rectangles -------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-pill: 999px;
  /* Zellij-arch motif: a subtly pointed top, used on hero
     cards & product tiles to evoke the Moroccan arch */
  --radius-arch: 50% 50% 8px 8px / 22% 22% 8px 8px;

  /* ---- Layout widths ------------------------------------- */
  --container:      1240px;
  --container-text: 720px;
  --container-wide: 1440px;

  /* ---- Borders ------------------------------------------- */
  --border-width:      1px;
  --border-width-bold: 2px;
}