/* Shopana — Spacing, radius, shadow, layout
   The UI is a 430px-wide mobile web app. Spacing is compact; the
   Figma item-spacing scale resolves to an 4 / 8 / 16 / 32 rhythm. */

:root {
  /* Spacing scale */
  --space-1:  2px;
  --space-2:  4px;   /* xxs */
  --space-3:  8px;   /* xs */
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  24px;
  --space-8:  32px;  /* m */
  --space-9:  40px;

  /* Radius */
  --radius-xs:   2px;   /* product thumbnails */
  --radius-sm:   3px;   /* small chips */
  --radius-md:   4px;   /* buttons, pills, cards */
  --radius-lg:   8px;   /* banners, modals */
  --radius-xl:   16px;  /* large sheets */
  --radius-pill: 999px; /* circular icon buttons, avatars */

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

  /* Shadows — soft, low-spread; nav bar uses an upward hairline */
  --shadow-nav:    0 -1px 1px 0 rgba(0,0,0,0.10);
  --shadow-card:   0 1px 3px 0 rgba(43,52,69,0.10);
  --shadow-raised: 0 2px 8px 0 rgba(0,0,0,0.12);
  --shadow-modal:  0 8px 28px 0 rgba(0,0,0,0.20);
  --shadow-fab:    0 4px 12px 0 rgba(231,58,47,0.35);

  /* Layout */
  --app-width:   430px;   /* canonical mobile frame */
  --topnav-h:    40px;
  --bottomnav-h: 56px;
  --gutter:      16px;

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-normal: 200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */
}