/* ============================================================
   JukeNFC · Spacing, radii, shadows & motion
   Chunky, tactile, rounded. Shadows are soft and lightly tinted.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */

  /* ---- Radii — rounded & friendly ---- */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-2xl: 38px;
  --radius-3xl: 52px;
  --radius-pill: 999px;
  --radius-card: var(--radius-xl);   /* default card rounding */

  /* ---- Soft tinted shadows ---- */
  --shadow-xs:  0 1px 2px rgba(34, 27, 51, 0.06);
  --shadow-sm:  0 2px 8px rgba(34, 27, 51, 0.08);
  --shadow-md:  0 8px 22px rgba(34, 27, 51, 0.10);
  --shadow-lg:  0 18px 44px rgba(34, 27, 51, 0.14);
  --shadow-xl:  0 28px 70px rgba(34, 27, 51, 0.18);

  /* Playful "lifted" shadow tinted with brand grape */
  --shadow-brand: 0 14px 34px rgba(108, 76, 241, 0.34);
  --shadow-mint:  0 14px 34px rgba(31, 200, 169, 0.32);
  --shadow-sun:   0 14px 34px rgba(255, 194, 61, 0.40);

  /* Tactile bottom-edge (chunky button) */
  --edge-brand: 0 4px 0 var(--grape-700);
  --edge-mint:  0 4px 0 var(--mint-600);
  --edge-sun:   0 4px 0 var(--sunshine-600);
  --edge-ink:   0 4px 0 rgba(34, 27, 51, 0.18);

  /* ---- Focus ---- */
  --ring-width: 3px;
  --ring: 0 0 0 var(--ring-width) var(--focus-ring);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    380ms; /* @kind other */

  /* ---- Layout ---- */
  --container:   1200px;
  --container-narrow: 880px;
  --gutter:      clamp(1rem, 4vw, 3rem); /* @kind spacing */
}