/* IDO — Button (Figma component set 22:143: Kind Primary · Dark · Outline · Link × State Default · Hover · Pressed · Focus · Disabled).
   Markup: <a class="btn btn--primary"><span class="btn__body"><span class="btn__label">…</span><svg class="btn__icon"><use href="/assets/ido/icons.svg#i-arrow-up-left"/></svg></span></a>
   The outer box never changes size (Figma: "Outer frame keeps the same size in every state"); only the body moves.
   .is-hover / .is-pressed / .is-focus force a state (styleguide only). */

.btn {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--radius-pill);
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.btn__body {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px var(--space-5);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-button);
  line-height: var(--lh-button);
  white-space: nowrap;
  transition:
    transform var(--dur-micro) var(--ease-reveal),
    background-color var(--dur-micro) var(--ease-reveal),
    box-shadow var(--dur-micro) var(--ease-reveal),
    color var(--dur-micro) var(--ease-reveal);
}
.btn__icon { width: 20px; height: 20px; flex: none; }

/* Kinds — Default */
.btn--primary .btn__body { background: var(--color-brand-primary); color: var(--color-on-brand-primary); box-shadow: var(--shadow-btn); }
.btn--dark .btn__body    { background: var(--color-bg-inverse); color: var(--color-text-inverse); box-shadow: var(--shadow-btn); }
.btn--outline .btn__body { color: var(--color-text-primary); }
/* Figma's 1.5 px stroke sits inside the body and takes no space. A real border would (and rounds to 1 px on
   1× screens, shrinking the button), so the stroke is an overlay. */
.btn--outline .btn__body::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 1.5px solid var(--btn-stroke, var(--color-text-primary));
}
.btn--link .btn__body    { padding: 2px var(--space-1); color: var(--color-text-primary); }

/* Hover (pointer devices only): body lifts 2 px */
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__body { transform: translateY(var(--btn-hover-y)); }
  .btn--primary:hover .btn__body { background: var(--color-brand-primary-hover); box-shadow: var(--shadow-btn-hover); }
  .btn--dark:hover .btn__body    { background: var(--color-ink-800); box-shadow: var(--shadow-btn-hover); }
  .btn--outline:hover .btn__body { background: var(--color-bg-surface-raised); box-shadow: var(--shadow-btn-hover); }
  .btn--link:hover .btn__body    { color: var(--color-brand-text); }
}
.btn.is-hover .btn__body { transform: translateY(var(--btn-hover-y)); }
.btn--primary.is-hover .btn__body { background: var(--color-brand-primary-hover); box-shadow: var(--shadow-btn-hover); }
.btn--dark.is-hover .btn__body    { background: var(--color-ink-800); box-shadow: var(--shadow-btn-hover); }
.btn--outline.is-hover .btn__body { background: var(--color-bg-surface-raised); box-shadow: var(--shadow-btn-hover); }
.btn--link.is-hover .btn__body    { color: var(--color-brand-text); }

/* Pressed: shrink AND sink (Ido's rule — must be felt), inner shadow, 120 ms */
.btn:active .btn__body,
.btn.is-pressed .btn__body {
  transform: translateY(var(--btn-press-y)) scale(var(--btn-press-scale));
  transition-duration: var(--dur-press);
}
.btn--primary:active .btn__body, .btn--primary.is-pressed .btn__body { background: var(--color-brand-primary-pressed); box-shadow: var(--shadow-btn-press); }
.btn--dark:active .btn__body,    .btn--dark.is-pressed .btn__body    { background: var(--color-ink-700); box-shadow: var(--shadow-btn-press); }
.btn--outline:active .btn__body, .btn--outline.is-pressed .btn__body { background: var(--color-bg-surface-raised); box-shadow: var(--shadow-btn-press); }
.btn--link:active .btn__body,    .btn--link.is-pressed .btn__body    { color: var(--color-brand-text); }

/* Focus: 2 px ring on the outer pill edge (2 px clear of the body) */
.btn:focus-visible, .btn.is-focus { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; }

/* Disabled */
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; pointer-events: none; }
.btn--primary:disabled .btn__body, .btn--primary[aria-disabled="true"] .btn__body,
.btn--dark:disabled .btn__body,    .btn--dark[aria-disabled="true"] .btn__body {
  background: var(--color-bg-surface-raised); color: var(--color-text-disabled); box-shadow: none;
}
.btn--outline:disabled .btn__body, .btn--outline[aria-disabled="true"] .btn__body { --btn-stroke: var(--color-border-default); color: var(--color-text-disabled); }
.btn--link:disabled .btn__body,    .btn--link[aria-disabled="true"] .btn__body    { color: var(--color-text-disabled); }

/* Busy (form submit): stays pressed, no double submit */
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"] .btn__body { transform: translateY(var(--btn-press-y)) scale(var(--btn-press-scale)); }

@media (prefers-reduced-motion: reduce) {
  .btn .btn__body, .btn:hover .btn__body, .btn.is-hover .btn__body { transform: none; }
}