/* KubeReach tokens — the Leadline `--l-*` custom properties, rescoped.
   --------------------------------------------------------------------
   The Leadline design handoff (docs/miniapp/kubereach) declares these on
   :root, which would collide with the KubePass miniapp's own globals and
   leak ember/paper values into every member + merchant screen. Here they
   live under `.reach-root` instead: ReachApp wraps everything it renders
   in <div className="reach-root">, so the tokens apply only inside the
   reach module and the rest of the app is untouched. */

.reach-root {
  /* Neutrals and accent ramp lifted from the KubePass token set. */
  --l-bg:#F5F3EF; --l-surface:#FFFFFF; --l-surface-2:#EDEBE5; --l-line:#E2E2E2;
  --l-ink:#272320; --l-ink-2:#444746; --l-ink-3:#777779;
  --l-accent:#C8470F; --l-accent-500:#E69254; --l-accent-soft:#FFF0E0;
  --l-accent-grad:linear-gradient(135deg,#FF9A5A 0%,#E69254 55%,#C8470F 100%);
  --l-amber:#FFB95E; --l-amber-soft:#FFF0E0; --l-amber-ink:#B0761F;
  --l-ok:#2F7D5E; --l-ok-soft:#E4F1EA;
  --l-ai:#5B4B8A; --l-ai-soft:#F1EEF7;
  --l-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --l-body:'Public Sans','Segoe UI',system-ui,-apple-system,sans-serif;

  /* The reach stage fills the AppStage frame; the root also carries the
     paper background so the module reads as its own surface. */
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--l-bg);
  color: var(--l-ink);
  font-family: var(--l-body);
}

/* Base resets scoped to the module (mirrors Leadline.html's global rules,
   but only inside .reach-root so member/merchant inputs are untouched). */
.reach-root button,
.reach-root input,
.reach-root select,
.reach-root textarea { font-family: inherit; outline: none; -webkit-appearance: none; appearance: none; }
.reach-root button:focus-visible,
.reach-root input:focus-visible,
.reach-root select:focus-visible,
.reach-root textarea:focus-visible { outline: 2px solid var(--l-accent); outline-offset: 1px; }
.reach-root select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5l5-5' stroke='%239A8B7E' stroke-width='1.8' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
}

/* Animations used by the kit — named identically to the handoff so ported
   screens keep working (lsheet bottom-sheet entrance, lspin spinner,
   lpulse QR pulse, lwave voice meter, ltoast). */
@keyframes lsheet{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes ltoast{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes lspin{to{transform:rotate(360deg)}}
@keyframes lpulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(200,71,15,0.4)}50%{transform:scale(1.05);box-shadow:0 0 0 16px rgba(200,71,15,0)}}
@keyframes lwave{from{transform:scaleY(0.35)}to{transform:scaleY(1.5)}}