/* ============================================================
   MFG — Spacing, radii, shadows, motion
   Brand feel: airy, minimal, generous whitespace between blocks.
   ============================================================ */

: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:  88px;
  --space-10: 120px;

  /* Carousel canvas — Instagram portrait 4:5 */
  --canvas-w: 1080px;
  --canvas-h: 1350px;
  --canvas-pad: 96px;   /* generous, airy safe margin */

  /* Radii — restrained, elegant */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Shadows — very soft, low contrast */
  --shadow-xs: 0 1px 2px rgba(28, 47, 84, 0.06);
  --shadow-sm: 0 4px 16px rgba(28, 47, 84, 0.07);
  --shadow-md: 0 12px 40px rgba(28, 47, 84, 0.10);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* Motion — gentle, never bouncy */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);    /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);     /* @kind other */
  --dur-fast: 140ms;  /* @kind other */
  --dur-base: 240ms;  /* @kind other */
  --dur-slow: 420ms;  /* @kind other */
}