/* ============================================================
   SOUTH ZONE — SPACING, RADII, SHADOWS, MOTION
   "Rounded, never sharp." Min radius 12px, max 24px.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;

  /* ---- Corner radii — rounded, never sharp ---- */
  --radius-sm:    12px;  /* min — chips, badges, inputs */
  --radius-md:    16px;  /* buttons, small cards */
  --radius-lg:    20px;  /* dish cards, image frames */
  --radius-xl:    24px;  /* large panels, hero blocks */
  --radius-pill:  999px; /* pill buttons, veg mark */

  /* ---- Shadows — warm, soft, never cold/grey ---- */
  --shadow-sm:   0 2px 8px rgba(33, 23, 14, 0.10);
  --shadow-md:   0 8px 24px rgba(33, 23, 14, 0.16);
  --shadow-lg:   0 16px 48px rgba(33, 23, 14, 0.22);
  --shadow-cta:  0 6px 18px rgba(229, 168, 0, 0.40); /* saffron glow on CTA */

  /* ---- Borders ---- */
  --border-width:       2px; /* @kind spacing */
  --border-width-bold:  3px; /* @kind spacing */
  --border-dashed-spec: 2px dashed var(--sz-espresso-500); /* @kind other */

  /* ---- Layout ---- */
  --container-max:   1200px; /* @kind spacing */
  --gutter:          var(--space-5); /* @kind spacing */
  --mobile-min:      375px;   /* @kind spacing */ /* mobile-first baseline */
  --bottombar-h:     64px;    /* @kind spacing */ /* mobile bottom nav height */
  --hit-target:      44px;    /* @kind spacing */ /* minimum touch target */

  /* ---- Motion — gentle, warm, no harsh bounces ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    240ms; /* @kind other */
  --dur-slow:    400ms; /* @kind other */
}