/* FEKRA KIT v1 — the design system under every page (TASTE.md made executable).
   Owner mandate 2026-08-02: no more beginner-feel pages. Zero dependencies, additive,
   performance-rail compliant (no blur filters on animated elements, reduced-motion safe). */

:root{
  /* tokens — single source of truth */
  --fk-bg:#05060a; --fk-bg2:#0b0c14; --fk-panel:#0e0f18; --fk-glass:rgba(20,16,34,.55);
  --fk-line:#1b1c2a; --fk-line2:#262738;
  --fk-ink:#eceaf6; --fk-dim:#9a97b0; --fk-faint:#5d5b72;
  --fk-vio:#8b5cf6; --fk-fux:#d946ef; --fk-rose:#f43f5e;
  --fk-green:#34d399; --fk-red:#ff5470; --fk-gold:#ffc94d;
  --fk-grad:linear-gradient(135deg,#7c3aed,#d946ef 55%,#f43f5e);
  --fk-glow:rgba(217,70,239,.28);
  /* motion — one physics, everywhere */
  --fk-spring:cubic-bezier(.22,1.4,.36,1);      /* overshoot spring */
  --fk-ease:cubic-bezier(.16,1,.3,1);            /* smooth settle */
  --fk-fast:.18s; --fk-med:.42s; --fk-slow:.8s;
  /* type + space scales */
  --fk-r-s:10px; --fk-r-m:14px; --fk-r-l:20px;
  --fk-s1:4px; --fk-s2:8px; --fk-s3:14px; --fk-s4:20px; --fk-s5:32px;
}

/* ── page enter: everything settles in, nothing pops ── */
.fk-page{animation:fkPageIn var(--fk-slow) var(--fk-ease) both}
@keyframes fkPageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── scroll reveal (js adds .on) ── */
.fk-reveal{opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity var(--fk-med) var(--fk-ease),transform var(--fk-med) var(--fk-spring)}
.fk-reveal.on{opacity:1;transform:none}
.fk-reveal[data-d="1"]{transition-delay:.06s}.fk-reveal[data-d="2"]{transition-delay:.12s}
.fk-reveal[data-d="3"]{transition-delay:.18s}

/* ── surfaces ── */
.fk-card{background:var(--fk-panel);border:1px solid var(--fk-line);border-radius:var(--fk-r-m);
  transition:transform var(--fk-fast) var(--fk-spring),border-color var(--fk-fast) ease,box-shadow var(--fk-med) ease}
.fk-card:active{transform:scale(.988)}
.fk-glass{background:var(--fk-glass);backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(139,92,246,.16);border-radius:var(--fk-r-l)}
.fk-hero{background:linear-gradient(160deg,#12091e,#0b0c14 55%);border:1px solid var(--fk-line);
  border-radius:var(--fk-r-l);position:relative;overflow:hidden}
.fk-hero::before{content:'';position:absolute;inset:-40% -20% auto;height:80%;pointer-events:none;
  background:radial-gradient(ellipse at 30% 0%,rgba(217,70,239,.13),transparent 60%)}

/* ── buttons: press physics on everything tappable ── */
.fk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  user-select:none;-webkit-user-select:none;border:1px solid transparent;border-radius:13px;
  font-weight:800;font-size:15px;padding:14px 22px;min-height:48px;color:var(--fk-ink);
  background:var(--fk-bg2);border-color:var(--fk-line2);
  transition:transform var(--fk-fast) var(--fk-spring),box-shadow var(--fk-fast) ease,filter var(--fk-fast) ease}
.fk-btn:active{transform:scale(.94)}
.fk-btn.primary{background:var(--fk-grad);border:0;box-shadow:0 6px 24px -8px var(--fk-glow)}
.fk-btn.primary:active{box-shadow:0 2px 10px -6px var(--fk-glow);filter:brightness(1.12)}
.fk-btn.ghost{background:transparent;border-color:var(--fk-line2);color:var(--fk-dim)}
.fk-btn.danger{background:transparent;border-color:var(--fk-rose);color:var(--fk-rose)}
.fk-btn:focus-visible{outline:2px solid var(--fk-fux);outline-offset:2px}
.fk-btn.dis{opacity:.35;pointer-events:none}

/* ── live numbers: value changes glide, never jump-cut ── */
.fk-num{font-variant-numeric:tabular-nums;transition:color var(--fk-med) ease}
.fk-num.bump{animation:fkBump var(--fk-med) var(--fk-spring)}
@keyframes fkBump{35%{transform:scale(1.06)}}

/* ── skeleton loading: nothing ever looks broken while data arrives ── */
.fk-skel{position:relative;overflow:hidden;background:var(--fk-bg2);border-radius:var(--fk-r-s);color:transparent!important}
.fk-skel::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.10),transparent);
  animation:fkShimmer 1.4s infinite}
@keyframes fkShimmer{to{transform:translateX(100%)}}

/* ── toast ── */
.fk-toast{position:fixed;left:50%;bottom:22px;z-index:99;transform:translateX(-50%) translateY(8px) scale(.97);
  background:#17091f;border:1px solid var(--fk-fux);color:#fff;padding:13px 20px;border-radius:14px;
  font-weight:800;font-size:14px;opacity:0;pointer-events:none;box-shadow:0 12px 40px rgba(0,0,0,.55);
  transition:opacity var(--fk-fast) ease,transform var(--fk-med) var(--fk-spring)}
.fk-toast.show{opacity:1;transform:translateX(-50%)}

/* ── stagger helper for lists (js sets --i) ── */
.fk-stagger>*{opacity:0;transform:translateY(10px);
  animation:fkItemIn var(--fk-med) var(--fk-spring) both;animation-delay:calc(var(--i,0)*55ms)}
@keyframes fkItemIn{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .fk-page,.fk-reveal,.fk-stagger>*{animation:none;transition:none;opacity:1;transform:none}
  .fk-skel::after{animation:none}
}