/* ============================================================
   OTTO CREATIVE — SPACING, RADII, SHADOWS, 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-26: 104px;   /* signature section vertical padding    */

  --container-max: 1240px;  /* @kind spacing */
  --section-pad-x: 40px;    /* @kind spacing */

  /* ---- Radii (soft & rounded — pills everywhere) ---------- */
  --radius-sm: 9px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---- Shadows (soft, long, low-alpha ink) ---------------- */
  --shadow-xs: 0 6px 18px -10px rgba(27,29,35,.30);
  --shadow-sm: 0 16px 34px -24px rgba(27,29,35,.40);
  --shadow-md: 0 20px 48px rgba(27,29,35,.17);
  --shadow-lg: 0 28px 56px -24px rgba(27,29,35,.40);
  --shadow-xl: 0 40px 80px -34px rgba(27,29,35,.55);
  /* colored glow — pass a brand color where used */
  --shadow-sky-glow: 0 18px 36px -14px #18BFF7;

  /* ---- Motion -------------------------------------------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);     /* @kind other */
  --ease-pop: cubic-bezier(.22, 1.2, .36, 1);   /* @kind other */ /* playful overshoot */
  --dur-fast: .16s;  /* @kind other */
  --dur-med: .28s;   /* @kind other */
  --dur-slow: .55s;  /* @kind other */

  /* ---- Signature backgrounds ----------------------------- */
  --dot-grid: radial-gradient(rgba(27,29,35,.06) 1.4px, transparent 1.4px); /* @kind other */
  --dot-grid-size: 26px 26px; /* @kind other */
}