/* MurJor AI™ shared design tokens and base components (premium pass, Nov 2026).
   Every page links this BEFORE its own stylesheet; page CSS may read the tokens and reuse the components.
   Brand: deep navy/violet, electric blue, gold (Buddy), copper (Buddy X™). Fraunces (display) + Inter (UI), self-hosted.
   Motion is transform/opacity only; prefers-reduced-motion turns it off. CSP-safe: no inline styles needed. */
:root{
  /* colour */
  --mj-deep:#070A22;--mj-navy:#0E1338;--mj-indigo:#1C1F5C;--mj-plum:#2A1F6B;--mj-violet:#8B5CF6;--mj-lav:#C4B5FD;
  --mj-blue:#38BDF8;--mj-electric:#3E8BFF;--mj-gold:#E6B85C;--mj-gold-hi:#FFE7A8;--mj-gold-lo:#C99A3E;
  --mj-copper:#E0763A;--mj-copper-hi:#FFB27A;--mj-ok:#4ADE80;--mj-err:#FCA5A5;
  --mj-ink:#F5F3FF;--mj-muted:#CBC6F0;--mj-dim:#A29DD0;--mj-line:rgba(126,140,255,.22);--mj-line-hi:rgba(150,160,255,.42);
  --mj-surface:rgba(22,26,74,.66);--mj-surface-2:rgba(30,34,92,.78);--mj-surface-solid:#12164A;
  /* type */
  --mj-display:Fraunces,Georgia,"Times New Roman",serif;--mj-ui:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-xs:12px;--fs-sm:14px;--fs-md:16px;--fs-lg:18px;--fs-xl:22px;
  --fs-h3:clamp(20px,1.6vw + 12px,24px);--fs-h2:clamp(30px,3.4vw + 14px,52px);--fs-h1:clamp(40px,6vw + 14px,84px);
  /* space, shape, depth, motion */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;
  --gutter:clamp(16px,4vw,40px);--maxw:1200px;
  --r-sm:12px;--r-md:16px;--r-lg:22px;--r-xl:30px;--r-pill:999px;
  --sh-1:0 1px 0 rgba(255,255,255,.06) inset,0 8px 24px rgba(3,5,24,.35);
  --sh-2:0 1px 0 rgba(255,255,255,.07) inset,0 18px 50px rgba(3,5,24,.55);
  --sh-gold:0 10px 30px rgba(230,184,92,.28);--sh-glow:0 0 40px rgba(139,92,246,.22);
  --ease:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.34,1.4,.5,1);--t-fast:.16s;--t-med:.32s;--t-slow:.7s;
  --ring:0 0 0 3px var(--mj-deep),0 0 0 5px var(--mj-lav);
}

/* Focus: one consistent, highly visible ring on every interactive element. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--mj-lav);outline-offset:3px}

/* ── Buttons ── */
.mj-btn{--b-bg:rgba(15,20,64,.6);--b-fg:var(--mj-ink);--b-bd:var(--mj-line-hi);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;
  border-radius:var(--r-md);border:1px solid var(--b-bd);background:var(--b-bg);color:var(--b-fg);
  font:600 16px/1 var(--mj-ui);letter-spacing:.005em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-med) var(--ease),background var(--t-med),border-color var(--t-med),color var(--t-med);
  -webkit-tap-highlight-color:transparent}
.mj-btn:hover{transform:translateY(-1px);border-color:var(--mj-lav)}
.mj-btn:active{transform:translateY(1px) scale(.985);transition-duration:.06s}
.mj-btn[disabled],.mj-btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;transform:none}
.mj-btn--gold{--b-bg:linear-gradient(180deg,var(--mj-gold-hi),var(--mj-gold) 58%,var(--mj-gold-lo));--b-fg:#1B1240;--b-bd:transparent;box-shadow:var(--sh-gold),inset 0 1px 0 rgba(255,255,255,.55)}
.mj-btn--gold:hover{box-shadow:0 14px 36px rgba(230,184,92,.42),inset 0 1px 0 rgba(255,255,255,.6);border-color:transparent}
.mj-btn--copper{--b-bg:linear-gradient(180deg,#FFC08F,var(--mj-copper) 60%,#B5541F);--b-fg:#2A0F02;--b-bd:transparent;box-shadow:0 10px 30px rgba(224,118,58,.3)}
.mj-btn--quiet{--b-bg:transparent;--b-bd:transparent;--b-fg:var(--mj-lav);padding:0 14px}
.mj-btn--quiet:hover{--b-fg:#fff;border-color:transparent}
.mj-btn--sm{min-height:44px;padding:0 18px;font-size:14px;border-radius:var(--r-pill)}
.mj-btn .mj-arrow{transition:transform var(--t-med) var(--ease)}
.mj-btn:hover .mj-arrow{transform:translateX(3px)}

/* ── Inputs ── */
.mj-field{display:grid;gap:6px}
.mj-label{font:600 14px/1.3 var(--mj-ui);color:var(--mj-ink)}
.mj-help{font-size:13px;color:var(--mj-dim)}
.mj-input{width:100%;min-height:52px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--mj-line-hi);background:rgba(8,11,36,.7);color:var(--mj-ink);font:500 16px var(--mj-ui);
  transition:border-color var(--t-med),box-shadow var(--t-med)}
.mj-input::placeholder{color:#8C88BE}
.mj-input:hover{border-color:var(--mj-lav)}
.mj-input:focus-visible{outline:0;border-color:var(--mj-lav);box-shadow:0 0 0 4px rgba(196,181,253,.22)}
.mj-input[aria-invalid=true]{border-color:var(--mj-err)}

/* ── Surfaces ── */
.mj-card{position:relative;padding:var(--sp-6);border-radius:var(--r-lg);border:1px solid var(--mj-line);background:linear-gradient(180deg,rgba(30,34,96,.72),rgba(14,18,58,.8));box-shadow:var(--sh-1)}
.mj-card--lift{transition:transform var(--t-med) var(--ease),border-color var(--t-med),box-shadow var(--t-med)}
.mj-card--lift:hover{transform:translateY(-4px);border-color:var(--mj-line-hi);box-shadow:var(--sh-2)}
.mj-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;font:700 12px/1.2 var(--mj-ui);letter-spacing:.22em;text-transform:uppercase;color:var(--mj-gold)}
.mj-eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.mj-tag{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;border-radius:var(--r-pill);border:1px solid var(--mj-line-hi);font:700 11px/1 var(--mj-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--mj-lav)}
.mj-tag--live{border-color:rgba(56,189,248,.6);color:#A5E8FF}
.mj-tag--live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mj-blue);box-shadow:0 0 8px var(--mj-blue)}
.mj-tag--soon{border-color:rgba(230,184,92,.5);color:var(--mj-gold-hi)}

/* ── Loading: skeleton shimmer (transform-only) ── */
.mj-skel{display:block;position:relative;overflow:hidden;border-radius:var(--r-sm);background:rgba(126,140,255,.12)}
.mj-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(196,181,253,.16),transparent);animation:mjShimmer 1.4s var(--ease) infinite}
.mj-skel-line{height:14px;margin:10px 0}.mj-skel-line.w60{width:60%}.mj-skel-line.w80{width:80%}.mj-skel-block{height:120px}
@keyframes mjShimmer{to{transform:translateX(100%)}}

/* ── Empty / error state with Buddy ── */
.mj-empty{display:grid;justify-items:center;gap:var(--sp-3);padding:var(--sp-8) var(--sp-6);text-align:center;border-radius:var(--r-lg);border:1px dashed var(--mj-line-hi);background:rgba(14,18,58,.5)}
.mj-empty mj-buddy{width:120px}
.mj-empty h2,.mj-empty h3{margin:0;font:500 22px/1.25 var(--mj-display);color:#fff}
.mj-empty p{margin:0;max-width:420px;color:var(--mj-muted)}

/* ── Toasts (web/theme/ui.js → MJUI.toast) ── */
.mj-toasts{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:60;display:grid;gap:8px;width:min(92vw,420px);transform:translateX(-50%);pointer-events:none}
.mj-toast{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--mj-line-hi);background:rgba(18,22,70,.96);color:var(--mj-ink);font:500 15px/1.4 var(--mj-ui);box-shadow:var(--sh-2);backdrop-filter:blur(10px);pointer-events:auto;animation:mjToastIn var(--t-med) var(--ease-spring) both}
.mj-toast::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--mj-lav)}
.mj-toast--ok::before{background:var(--mj-ok)}.mj-toast--err::before{background:var(--mj-err)}
.mj-toast.out{animation:mjToastOut .22s var(--ease) both}
@keyframes mjToastIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes mjToastOut{to{opacity:0;transform:translateY(8px)}}

/* ── Scroll reveal: web/theme/ui.js arms only elements below the fold (no flash, no layout shift; without JS all is visible) ── */
.mj-reveal.mj-armed{opacity:0;transform:translateY(28px)}
.mj-reveal.mj-armed.mj-in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .mj-btn,.mj-card--lift,.mj-btn .mj-arrow{transition:none}
  .mj-btn:hover,.mj-card--lift:hover,.mj-btn:hover .mj-arrow{transform:none}
  .mj-skel::after,.mj-toast{animation:none}
  .mj-reveal.mj-armed{opacity:1;transform:none}
}