/* NexaFlow shared design system — SAFE-GLOBAL only.
   Loaded on every page. Does NOT set body background/color/font-family
   (each page keeps its own theme). Tokens + components are opt-in. */

/* ---- R6 Accessibility: visible keyboard focus ---- */
*:focus-visible{outline:2px solid #7c5cff;outline-offset:2px}

/* ---- R2 Overflow safety ---- */
img,svg,video,canvas{max-width:100%;height:auto}
html,body{overflow-x:hidden;-webkit-text-size-adjust:100%}

/* ---- Design TOKENS (namespaced; for pages to adopt later) ---- */
:root{
  --xfl-accent:#7c5cff;
  --xfl-accent-2:#9b7bff;
  /* spacing scale 4..48px */
  --xfl-s1:4px;
  --xfl-s2:8px;
  --xfl-s3:12px;
  --xfl-s4:16px;
  --xfl-s5:24px;
  --xfl-s6:32px;
  --xfl-s7:48px;
  /* type scale */
  --xfl-fs-xs:13px;
  --xfl-fs-sm:14px;
  --xfl-fs-md:16px;
  --xfl-fs-lg:18px;
  --xfl-fs-xl:22px;
  --xfl-fs-2xl:28px;
  /* radius + shadow */
  --xfl-r:12px;
  --xfl-shadow:0 8px 24px rgba(0,0,0,.18);
}

/* ---- Opt-in components (namespaced .xfl-*; apply only when used) ---- */
.xfl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 18px;border:0;border-radius:var(--xfl-r);
  font-size:var(--xfl-fs-md);font-weight:700;line-height:1;cursor:pointer;
  background:var(--xfl-accent);color:#fff;
  transition:filter .15s ease,transform .15s ease}
.xfl-btn:hover{filter:brightness(1.08)}
.xfl-btn:active{transform:translateY(1px)}

.xfl-card{
  border-radius:var(--xfl-r);padding:var(--xfl-s5);
  box-shadow:var(--xfl-shadow)}

.xfl-input{
  min-height:44px;padding:0 14px;border-radius:var(--xfl-r);
  font-size:var(--xfl-fs-md);line-height:1.4}

.xfl-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:999px;
  font-size:var(--xfl-fs-sm);font-weight:700}

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