/* ============================================================
   MUNCHIO — SPACING, RADII, BORDERS, SHADOWS, MOTION
   Neo-brutalist structure: heavy solid-black outlines and hard
   offset (un-blurred) drop-shadows — with friendly rounded corners
   borrowed from the cartoon side.
   ============================================================ */
: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;
  --space-10: 128px;

  /* --- Section / layout rhythm --- */
  --gutter:        clamp(20px, 5vw, 72px); /* @kind spacing */
  --section-pad:   clamp(56px, 9vw, 140px);
  --maxw:          1240px;

  /* --- Radii (chunky-friendly, never sharp-corporate) --- */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* --- Borders (brutalist, solid black) --- */
  --bw:      2px;   /* hairline structural */
  --bw-bold: 3px;   /* standard outline */
  --bw-xl:   5px;   /* hero outline */
  --border:      var(--bw-bold) solid var(--border-color);
  --border-bold: var(--bw-xl)   solid var(--border-color);

  /* --- Hard offset shadows (no blur — the brutalist signature) --- */
  --shadow-xs:  2px 2px 0 var(--ink);
  --shadow-sm:  4px 4px 0 var(--ink);
  --shadow-md:  6px 6px 0 var(--ink);
  --shadow-lg:  9px 9px 0 var(--ink);
  --shadow-xl:  14px 14px 0 var(--ink);
  /* colored offset shadows for stacked accents */
  --shadow-red:  6px 6px 0 var(--chili);
  --shadow-lime: 6px 6px 0 var(--lime);

  /* --- Playful rotations (stickers, polaroids, badges) --- */
  --tilt-sm: -2deg; /* @kind other */
  --tilt-md: -4deg; /* @kind other */
  --tilt-lg:  6deg; /* @kind other */

  /* --- Motion: punchy, physics-y. Overshoot easing for the bounce. --- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);  /* @kind other */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);     /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */

  /* --- Focus ring --- */
  --focus-ring: 0 0 0 3px var(--cream), 0 0 0 6px var(--chili);
}