/* =============================================================
   FALMIS — BUTTONS
   Requires falmis-tokens.css

   One shape, five intents, three sizes.
   The primary button is the one already approved: aurora
   gradient, highlight border, aurora glow, lift on hover,
   compress on press.

   <button class="fm-btn">…</button>
   <button class="fm-btn fm-btn--secondary fm-btn--lg">…</button>
   <button class="fm-btn fm-btn--icon" aria-label="…">…</button>
   ============================================================= */

.fm-btn{
  /* per-button knobs */
  --btn-h:var(--fm-control-md);
  --btn-px:var(--fm-space-6);
  --btn-fs:var(--fm-text-sm);

  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--fm-space-2);

  height:var(--btn-h);
  padding-inline:var(--btn-px);
  border-radius:var(--fm-radius-full);
  border:1px solid var(--fm-border-strong);

  background:var(--fm-gradient-button);
  color:var(--fm-text-on-brand);
  font-family:var(--fm-font);
  font-size:var(--btn-fs);          /* never below 13px — white on the
                                       fuchsia end measures 4.71:1 */
  font-weight:var(--fm-weight-bold);
  line-height:1;
  letter-spacing:var(--fm-tracking);
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
  text-decoration:none;

  box-shadow:var(--fm-glow-aurora), inset 0 1px 0 var(--fm-highlight-top);
  transition:transform var(--fm-dur-fast) var(--fm-ease-out),
             filter    var(--fm-dur-fast) var(--fm-ease-out),
             background var(--fm-dur-fast) var(--fm-ease-out),
             border-color var(--fm-dur-fast) var(--fm-ease-out),
             color     var(--fm-dur-fast) var(--fm-ease-out);
}

.fm-btn:hover{ transform:translateY(var(--fm-lift,-3px)); filter:brightness(1.1); }

.fm-btn:active{
  transform:translateY(0) scale(var(--fm-press,.97));
  filter:brightness(.96);
  transition-duration:var(--fm-dur-instant);
  transition-timing-function:var(--fm-ease-snap);
}

.fm-btn:focus-visible{
  outline:2px solid var(--fm-focus-ring);
  outline-offset:3px;   /* never 0 — the ring vanishes on a brand fill */
}

/* ---------- intents ---------- */

.fm-btn--secondary{
  background:var(--fm-surface-2);
  border-color:var(--fm-border-strong);
  color:var(--fm-text-primary);
  box-shadow:none;
  font-weight:var(--fm-weight-medium);
}
.fm-btn--secondary:hover{ background:var(--fm-surface-3); filter:none; }

.fm-btn--ghost{
  background:transparent;
  border-color:var(--fm-border);
  color:var(--fm-text-body);
  box-shadow:none;
  font-weight:var(--fm-weight-medium);
}
.fm-btn--ghost:hover{
  background:rgba(255,255,255,.06);
  border-color:var(--fm-border-strong);
  color:var(--fm-text-primary);
  filter:none;
}

.fm-btn--danger{
  background:var(--fm-error-bg);
  border-color:var(--fm-border-error);
  color:var(--fm-error);
  box-shadow:none;
}
.fm-btn--danger:hover{ background:rgba(240,86,122,.20); filter:none; }
.fm-btn--danger:focus-visible{ outline-color:var(--fm-error); }

/* text-only — for a tertiary action beside a real button */
.fm-btn--link{
  background:none;
  border-color:transparent;
  color:var(--fm-text-accent);
  box-shadow:none;
  padding-inline:var(--fm-space-2);
  font-weight:var(--fm-weight-medium);
}
.fm-btn--link:hover{
  background:none; filter:none; transform:none;
  color:var(--fm-text-primary);
  text-decoration:underline;
  text-underline-offset:4px;
}

/* ---------- sizes ---------- */

.fm-btn--sm{ --btn-h:var(--fm-control-sm); --btn-px:var(--fm-space-4); --btn-fs:var(--fm-text-sm); }
.fm-btn--lg{ --btn-h:var(--fm-control-lg); --btn-px:var(--fm-space-8); --btn-fs:var(--fm-text-md); }

/* sm is for dense desktop rows only. 44px is the touch minimum. */

/* ---------- shapes ---------- */

.fm-btn--icon{
  --btn-px:0;
  width:var(--btn-h);
  aspect-ratio:1;
  padding:0;
}

.fm-btn--block{ display:flex; width:100%; }

/* ---------- icons inside a button ---------- */

.fm-btn svg,
.fm-btn .fm-btn__ico{
  width:1.15em;
  height:1.15em;
  flex:none;
  display:block;
}
/* arrows point at the direction of travel and flip with the document */
.fm-btn__ico--dir{ transform:scaleX(1); }
[dir="rtl"] .fm-btn__ico--dir{ transform:scaleX(-1); }

/* ---------- disabled ---------- */

.fm-btn:disabled,
.fm-btn[aria-disabled="true"]{
  background:var(--fm-surface-2);
  border-color:var(--fm-border);
  color:var(--fm-text-disabled);
  box-shadow:none;
  cursor:not-allowed;
  transform:none;
  filter:none;
}

/* ---------- loading ---------- */

.fm-btn[data-loading="true"]{
  color:transparent;
  pointer-events:none;
  transform:none;
}
.fm-btn[data-loading="true"] > *{ visibility:hidden; }
.fm-btn[data-loading="true"]::after{
  content:"";
  position:absolute;
  inset-block-start:calc(50% - .55em);
  inset-inline-start:calc(50% - .55em);
  width:1.1em;
  height:1.1em;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.28);
  border-top-color:#fff;
  animation:fm-btn-spin 700ms linear infinite;
}
.fm-btn--secondary[data-loading="true"]::after,
.fm-btn--ghost[data-loading="true"]::after{
  border-color:var(--fm-border-strong);
  border-top-color:var(--fm-text-primary);
}
.fm-btn--danger[data-loading="true"]::after{
  border-color:var(--fm-border-error);
  border-top-color:var(--fm-error);
}
@keyframes fm-btn-spin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce){
  html:not(.fm-motion-force) .fm-btn[data-loading="true"]::after{animation-duration:2s;}
}

/* ---------- a group of buttons ---------- */

.fm-btn-group{
  display:flex;
  flex-wrap:wrap;
  gap:var(--fm-space-3);
  align-items:center;
}

/* =============================================================
   RULES
   · One primary button per view. Two primaries means neither
     is primary.
   · Label is a verb. "شروع فال", not "تایید".
   · Never below 13px. White on the gradient's fuchsia end is
     4.71:1, which fails for smaller text.
   · Glow is on the primary only. Shadow means depth, glow means
     importance; nothing carries both.
   · Icon-only buttons need aria-label.
   ============================================================= */