/* ═══════════════════════════════════════════════════════════════
   mbanc.ai — Spacing, radii, shadows, glows, motion
   The "holographic" surface vocabulary: blur, hairlines, ember glow.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Spacing scale (4px base) ─────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-9:  34px;   /* header gutter */
  --sp-10: 40px;
  --sp-16: 64px;

  /* ── Radii ────────────────────────────────────────────────── */
  --radius-xs:   4px;    /* kbd chips, small inputs        */
  --radius-sm:   8px;    /* buttons, badges                */
  --radius-md:   12px;   /* inputs, logo button, cards     */
  --radius-lg:   17px;   /* app nodes / glass cards        */
  --radius-xl:   24px;   /* login glass card               */
  --radius-pill: 100px;  /* command bar / pills            */
  --radius-full: 50%;    /* core orb / avatars             */

  /* ── Blur (glassmorphism) ─────────────────────────────────── */
  --blur-sm:  8px;
  --blur-md:  14px;   /* header                          */
  --blur-lg:  20px;   /* glass cards / core              */

  /* ── Elevation shadows ────────────────────────────────────── */
  --shadow-card:
    0 8px 32px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-card-hover:
    0 0 40px rgba(255, 51, 0, 0.30),
    0 0 0 1px rgba(255, 51, 0, 0.30),
    0 12px 40px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-glass:
    0 32px 64px -16px rgba(0, 0, 0, 0.50),
    0 0 60px rgba(255, 51, 0, 0.06),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
  --shadow-modal:
    0 24px 64px rgba(0, 0, 0, 0.40);

  /* ── Ember glows (the brand's signature light) ────────────── */
  --glow-sm:  0 0 12px rgba(255, 51, 0, 0.15);
  --glow-md:  0 0 16px rgba(255, 51, 0, 0.25);
  --glow-lg:  0 0 40px rgba(255, 51, 0, 0.30);
  --glow-btn: 0 4px 16px rgba(255, 51, 0, 0.30);
  --glow-success: 0 0 8px rgba(34, 197, 94, 0.40);
  --focus-ring: 0 0 0 3px rgba(255, 51, 0, 0.10), 0 0 20px rgba(255, 51, 0, 0.05);

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);   /* @kind other */
  --ease-pop:    cubic-bezier(0.16, 1.18, 0.4, 1); /* @kind other */
  --dur-fast:    0.25s; /* @kind other */
  --dur-base:    0.35s; /* @kind other */
  --dur-slow:    0.5s;  /* @kind other */
}