/* ============================================================
   HALF NUTS CO — SPACING, RADII, ELEVATION, MOTION
   Base unit = 4px. The brand reads chunky & friendly: generous
   rounding on cards, full pills on nutrition "round devices",
   and a soft warm shadow rather than hard grey drop-shadows.
   ============================================================ */

: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-section: clamp(56px, 8vw, 112px);

  /* ---- Radii ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 9999px;
  --radius-none: 0px;

  /* ---- Borders ---- */
  --border-width: 2px;          /* the brand likes a confident 2px line */
  --border-hairline-width: 1px;

  /* ---- Elevation (warm, low, never cold grey) ---- */
  --shadow-sm:  0 1px 2px rgba(74, 8, 38, 0.08);
  --shadow-md:  0 6px 18px rgba(74, 8, 38, 0.12);
  --shadow-lg:  0 18px 44px rgba(74, 8, 38, 0.18);
  --shadow-pop: 0 10px 0 rgba(74, 8, 38, 0.18); /* playful hard offset */

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.3, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    200ms; /* @kind other */
  --dur-slow:    360ms; /* @kind other */

  /* ---- Layout ---- */
  --container:      1200px;
  --container-wide: 1400px;
  --container-text: 720px;
}