/* ============================================================
   SPACING · RADIUS · SHADOW · MOTION · LAYOUT
   Generous whitespace. Soft (never heavy) shadows. Gentle motion.
   ============================================================ */

:root {
  /* --- Spacing scale (4px base) --- */
  --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;  /* big section vertical rhythm */

  /* --- Layout --- */
  --container:       1000px;  /* centered max-width content */
  --container-wide:  1180px;
  --gutter:          24px;
  --section-y:       var(--space-32);  /* vertical padding between sections */

  /* --- Radius --- */
  --radius-pill:  999px;  /* navbar, buttons, tags */
  --radius-photo: 6px;    /* framed/cutout photo corners */
  --radius-card:  18px;   /* soft content cards */
  --radius-sm:    10px;

  /* --- Shadows (soft, warm-tinted, never heavy) --- */
  --shadow-polaroid: 0 10px 24px -10px rgba(26, 20, 16, 0.32);
  --shadow-card:     0 8px 22px -14px rgba(26, 20, 16, 0.28);
  --shadow-pill:     0 6px 18px -8px rgba(26, 20, 16, 0.30);
  --shadow-none:     none;

  /* --- Motion (gentle, slight bounce on press) --- */
  --dur-fast:  140ms;  /* @kind other */
  --dur-base:  220ms;  /* @kind other */
  --dur-slow:  420ms;  /* @kind other */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);  /* @kind other */

  /* --- Signature: scattered photo-card rotations --- */
  --tilt-sm:  -3deg;  /* @kind other */
  --tilt-md:   4deg;  /* @kind other */
  --tilt-lg:  -6deg;  /* @kind other */
}