/* ============================================================
   Maple Pavers — Spacing, Radius, Layout & Elevation
   8px base unit. Soft 4px shape language (precision-cut pavers).
   Depth via tonal layers + one diffused low-opacity shadow.
   ============================================================ */

:root {
  /* ---- Spacing scale (8px base) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;  /* stack-sm */
  --space-4:  16px;  /* mobile margin */
  --space-5:  24px;  /* gutter / stack-md */
  --space-6:  32px;
  --space-7:  48px;  /* desktop margin / stack-lg */
  --space-8:  64px;
  --space-9:  96px;  /* section gap */
  --space-10: 128px;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --gutter:        24px;
  --margin-mobile: 16px;
  --margin-desktop:48px;
  --section-gap:   96px;

  /* ---- Radius — Soft (precision-cut) ---- */
  --radius-sm:   2px;
  --radius:      4px;   /* DEFAULT — buttons, cards, inputs */
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* ---- Borders ---- */
  --border-hairline: 1px;
  --border-medium:   2px;

  /* ---- Elevation — diffused, low-opacity (stone sits flat) ---- */
  --shadow-none: none;
  --shadow-sm:  0 1px 2px rgba(26,26,26,0.06);
  --shadow:     0 4px 16px rgba(26,26,26,0.10);          /* card lift */
  --shadow-md:  0 8px 28px rgba(26,26,26,0.12);          /* forms, popovers */
  --shadow-lg:  0 18px 48px rgba(26,26,26,0.18);         /* dialogs */
  --shadow-focus: 0 0 0 3px rgba(176,79,36,0.22);        /* focus ring */

  /* ---- Motion — restrained, architectural ---- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur:        220ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
  --lift:       translateY(-2px); /* @kind other */
}