:root{
  /* ── surfaces ─────────────────────────────────────── */
  --mb-base:#0B0B14;            /* near-black indigo page base */
  --mb-base-2:#07070E;          /* deeper, for gradient feet */
  --mb-surface:rgba(255,255,255,.04);
  --mb-surface-2:rgba(255,255,255,.065);
  --mb-hairline:rgba(255,255,255,.08);
  --mb-hairline-strong:rgba(255,255,255,.14);

  /* ── brand (MidBank indigo only — never lime/green) ── */
  --mb-primary:#6366f1;
  --mb-primary-press:#4f46e5;
  --mb-accent:#818cf8;
  --mb-accent-soft:#a5b4fc;

  /* ── ink ──────────────────────────────────────────── */
  --mb-ink:#ffffff;
  --mb-ink-2:rgba(255,255,255,.72);
  --mb-ink-3:rgba(255,255,255,.55);
  --mb-ink-4:rgba(255,255,255,.38);

  /* ── type ─────────────────────────────────────────── */
  --mb-font-display:'Playfair Display',Georgia,serif;
  --mb-font-ui:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mb-t-hero:clamp(2.6rem,7vw,4.5rem);      /* h1 display, lh 1.05, ls -.02em */
  --mb-t-name:clamp(2rem,8vw,3rem);          /* person name on tip page */
  --mb-t-amount:clamp(3.5rem,16vw,4.5rem);   /* Inter 200, tabular-nums, lh 1 */
  --mb-t-h2:2rem;
  --mb-t-h3:1.375rem;
  --mb-t-body:1rem;                          /* lh 1.6, max-width 62ch */
  --mb-t-small:.875rem;
  --mb-t-label:.8rem;                        /* 500, uppercase, ls .08em */

  /* ── spacing (8px base — ONLY these gaps) ─────────── */
  --mb-s1:8px; --mb-s2:16px; --mb-s3:24px; --mb-s4:40px; --mb-s5:64px;
  --mb-section-y:clamp(4rem,10vh,8rem);
  --mb-card-pad:clamp(20px,5vw,32px);

  /* ── radii (TWO values, no exceptions) ────────────── */
  --mb-r-card:16px;
  --mb-r-pill:999px;

  /* ── shadows (TWO values, no exceptions) ──────────── */
  --mb-shadow-ambient:0 1px 2px rgba(0,0,0,.4);
  --mb-shadow-glow:0 0 80px -20px rgba(99,102,241,.5); /* ONE hero element per screen ONLY */

  /* ── motion (every transition uses one of these) ──── */
  --mb-ease-spring:cubic-bezier(.34,1.56,.64,1);  /* entrances, presses, chips */
  --mb-ease-out:cubic-bezier(.22,1,.36,1);        /* reveals, slides, scroll-ins */
  --mb-ease-in:cubic-bezier(.4,0,1,1);            /* exits only */
  --mb-dur-fast:180ms;    /* hover, focus, colour */
  --mb-dur-base:350ms;    /* chip select, card lift, slide-up */
  --mb-dur-slow:450ms;    /* screen entrance */
  --mb-dur-ritual:900ms;  /* success choreography beat */

  /* ── containers ───────────────────────────────────── */
  --mb-w-page:1120px;
  --mb-w-phone:430px;     /* tip flow stays phone-shaped even on desktop */
}

/* Ambient field used behind every hero — depth via gradient, never shadow */
.mb-field{position:relative;isolation:isolate}
.mb-field::before{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 120% 80% at 50% 0%,rgba(99,102,241,.25),transparent 60%)}

/* Base reset every tipping page inherits */
html,body{background-color:var(--mb-base-2);
  background-image:linear-gradient(180deg,var(--mb-base) 0%,var(--mb-base-2) 100%);
  background-attachment:fixed;color:var(--mb-ink);font-family:var(--mb-font-ui);
  -webkit-font-smoothing:antialiased;min-height:100vh}

/* Buttons — there is no unstyled button anywhere */
.mb-btn{font:600 1rem/1 var(--mb-font-ui);border:0;border-radius:var(--mb-r-pill);
  padding:18px 32px;min-height:56px;cursor:pointer;
  transition:transform var(--mb-dur-base) var(--mb-ease-spring),
             background var(--mb-dur-fast) var(--mb-ease-out)}
.mb-btn:active{transform:scale(.97)}
.mb-btn--primary{background:var(--mb-primary);color:#fff}
.mb-btn--primary:active{background:var(--mb-primary-press)}
.mb-btn--ghost{background:var(--mb-surface);color:var(--mb-ink-2);
  box-shadow:inset 0 0 0 1px var(--mb-hairline)}

/* Focus — custom ring, never the browser default */
:where(a,button,input,textarea,[tabindex]):focus-visible{outline:none;
  box-shadow:0 0 0 2px var(--mb-base),0 0 0 4px var(--mb-accent)}

.mb-card{background:var(--mb-surface);border:1px solid var(--mb-hairline);
  border-radius:var(--mb-r-card);padding:var(--mb-card-pad)}
.mb-label{font:500 var(--mb-t-label)/1 var(--mb-font-ui);text-transform:uppercase;
  letter-spacing:.08em;color:var(--mb-ink-3)}
.mb-serif{font-family:var(--mb-font-display);font-weight:600;letter-spacing:-.02em}
.mb-num{font-variant-numeric:tabular-nums;font-weight:200}

/* Sandbox disclosure — elegant, never apologetic. Required on every money screen. */
.mb-sandbox{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;
  border-radius:var(--mb-r-pill);background:var(--mb-surface-2);
  border:1px solid var(--mb-hairline);font:500 12px/1 var(--mb-font-ui);
  color:var(--mb-ink-3);letter-spacing:.01em}
.mb-sandbox::before{content:'';width:6px;height:6px;border-radius:50%;
  background:var(--mb-accent);box-shadow:0 0 8px var(--mb-accent)}

/* Demo-data tag — every unverified figure carries one */
.mb-demotag{font:500 10px/1 var(--mb-font-ui);text-transform:uppercase;
  letter-spacing:.1em;color:var(--mb-ink-4);vertical-align:super;margin-left:6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}