/* ============================================================
   Microgenn Loyalty — shared brand / design system
   Loaded by every screen (landing, owner, admin, pos, app).
   Premium SaaS look: Inter type, refined neutrals, soft shadows,
   consistent focus rings. Layered on top of Tailwind CDN.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700;800&display=swap');

:root{
  --mg-bg:#f6f7fb;          /* app canvas */
  --mg-ink:#0f172a;         /* slate-900 */
  --mg-muted:#64748b;       /* slate-500 */
  --mg-line:#e8ebf2;        /* hairline border */
  --mg-primary:#4f46e5;     /* indigo-600 */
  --mg-primary-700:#4338ca;
  --mg-ring:rgba(79,70,229,.35);
  --mg-shadow:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --mg-shadow-md:0 4px 12px rgba(15,23,42,.07), 0 2px 4px rgba(15,23,42,.05);
  --mg-shadow-lg:0 18px 48px rgba(15,23,42,.16);
}

*{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html,body{
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:-0.011em;
}
/* tighten + balance headings for a designed feel */
h1,h2,h3{ letter-spacing:-0.02em; }

/* refined scrollbars */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#cdd3df; border-radius:8px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:#aeb6c6; background-clip:content-box; }
::selection{ background:rgba(79,70,229,.18); }

/* visible, accessible focus ring everywhere */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--mg-ring); border-color:var(--mg-primary)!important;
}

/* ---- reusable component classes (use where helpful) ---- */
.mg-card{ background:#fff; border:1px solid var(--mg-line); border-radius:18px; box-shadow:var(--mg-shadow); }
.mg-card-lg{ background:#fff; border:1px solid var(--mg-line); border-radius:22px; box-shadow:var(--mg-shadow-md); }
.mg-input{ width:100%; border:1px solid #d7dce6; border-radius:12px; padding:.6rem .8rem; background:#fff; transition:box-shadow .15s,border-color .15s; }
.mg-input:focus{ outline:none; border-color:var(--mg-primary); box-shadow:0 0 0 3px var(--mg-ring); }
.mg-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; border-radius:12px; padding:.65rem 1.1rem; transition:transform .06s ease, box-shadow .15s, background .15s; }
.mg-btn:active{ transform:translateY(1px); }
.mg-btn-primary{ background:var(--mg-primary); color:#fff; box-shadow:0 1px 2px rgba(79,70,229,.35); }
.mg-btn-primary:hover{ background:var(--mg-primary-700); }
.mg-btn-ghost{ background:#fff; color:#334155; border:1px solid var(--mg-line); }
.mg-btn-ghost:hover{ background:#f8fafc; }
.mg-badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:600; padding:.18rem .6rem; border-radius:999px; }

/* subtle entrance for cards/sections */
@keyframes mgRise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.mg-rise{ animation:mgRise .5s cubic-bezier(.2,.7,.2,1) both; }

/* gradient text helper */
.mg-grad{ background:linear-gradient(92deg,#818cf8,#4f46e5 45%,#7c3aed); -webkit-background-clip:text; background-clip:text; color:transparent; }