/* ──────────────────────────────────────────────────────────────
   BazaFit — Spacing, radii, shadows, motion
   8-ish based rhythm with generous mobile padding. Soft hairlines,
   neon outer glows, deep modal drop shadows.
   ────────────────────────────────────────────────────────────── */

:root {
  /* ── Spacing scale ──────────────────────────────────── */
  --space-1:   4px;
  --space-2:   6px;
  --space-3:   8px;
  --space-4:   10px;
  --space-5:   12px;
  --space-6:   14px;
  --space-7:   16px;   /* default screen gutter             */
  --space-8:   18px;
  --space-9:   20px;
  --space-10:  24px;
  --space-12:  28px;
  --space-14:  36px;   /* profile top margin                */

  --gutter:        16px;  /* page side padding                 */
  --stack-gap:     12px;  /* gap between stacked card buttons  */
  --content-max:   500px; /* mobile content column cap         */
  --modal-max:     420px; /* modal width cap                   */

  /* ── Radii ──────────────────────────────────────────── */
  --r-xs:    6px;    /* set-rows, tiny chips                  */
  --r-sm:    8px;    /* nav buttons                          */
  --r-md:    10px;   /* calendar day                         */
  --r-lg:    12px;   /* inputs, icon tiles                    */
  --r-xl:    14px;   /* primary buttons, inputs              */
  --r-2xl:   16px;   /* list cards                           */
  --r-3xl:   18px;   /* card buttons                         */
  --r-4xl:   20px;   /* summary cards, calendar card         */
  --r-5xl:   24px;   /* modals                               */
  --r-pill:  20px;   /* tags, back button                   */
  --r-full:  9999px; /* avatars, dots                        */

  /* ── Hit target ─────────────────────────────────────── */
  --hit-min: 44px;

  /* ── Shadows & glows ────────────────────────────────── */
  --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.30);
  --shadow-modal:   0 20px 60px rgba(0, 0, 0, 0.70);
  --shadow-cta:     0 4px 12px rgba(48, 167, 247, 0.30);
  --glow-blue-card:   0 4px 24px rgba(0, 140, 255, 0.08);
  --glow-green-card:  0 4px 24px rgba(0, 220, 130, 0.07);
  --glow-orange-card: 0 4px 24px rgba(255, 130, 40, 0.07);
  --glow-purple-card: 0 4px 24px rgba(130, 60, 255, 0.10);
  --glow-gold-card:   0 4px 24px rgba(255, 190, 40, 0.09);
  --glow-icon:        0 0 14px;   /* @kind shadow */ /* + accent glow color */

  /* ── Blur ───────────────────────────────────────────── */
  --blur-modal: 6px;
  --blur-chip:  8px;

  /* ── Motion ─────────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.25, 0.8, 0.25, 1); /* @kind other */
  --dur-fast:     0.15s;  /* @kind other */
  --dur-base:     0.2s;   /* @kind other */
  --dur-page:     0.35s;  /* @kind other */
  --press-scale:  0.97;    /* @kind other */
  --press-scale-sm: 0.94;  /* @kind other */
}