/* ==========================================================================
   Button Component — Neobrutalism press-down
   - .btn            base
   - .btn--primary   accent (lime) fill
   - .btn--ink       solid ink (black) fill
   - .btn--ghost     transparent
   - .btn--icon      square icon button
   - .btn--sm/.btn--lg  size variants
   ========================================================================== */

.btn {
  --btn-bg:        var(--surface);
  --btn-color:     var(--ink);
  --btn-border:    var(--stroke);
  --btn-shadow:    var(--sh-sm);
  --btn-shadow-h:  var(--sh-md);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);

  font-family: var(--ff-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;

  padding: 0.875rem 1.25rem;
  min-height: 48px;          /* a11y touch target */

  background-color: var(--btn-bg);
  color: var(--btn-color);
  border: 2px solid var(--btn-border);
  border-radius: var(--r-0);
  box-shadow: var(--btn-shadow);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    transform   var(--dur-quick) var(--ease),
    box-shadow  var(--dur-quick) var(--ease),
    background-color var(--dur) var(--ease),
    color       var(--dur) var(--ease);
}

/* Subtle hover — shadow grows one step, no scale, no shift */
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    box-shadow: var(--btn-shadow-h);
  }
}

/* Press-down — snaps the button down onto its shadow */
.btn:active {
  transform: translate(var(--press-shift), var(--press-shift));
  box-shadow: var(--sh-press);
  transition-duration: var(--dur-quick);
}

.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Variants ---------------------------------------------------------- */

.btn--primary {
  --btn-bg:    var(--accent);
  --btn-color: var(--ink-on-accent);
}

.btn--ink {
  --btn-bg:    var(--ink);
  --btn-color: var(--bg);
}

.btn--ghost {
  --btn-bg: transparent;
}

.btn--ghost:hover {
  --btn-bg: var(--surface);
}

/* ---- Sizes ------------------------------------------------------------- */

.btn--sm {
  font-size: var(--fs-caption);
  padding: 0.625rem 0.875rem;
  min-height: 40px;
  --btn-shadow:   var(--sh-xs);
  --btn-shadow-h: var(--sh-sm);
  --press-shift:  3px;
}

.btn--lg {
  font-size: var(--fs-body);
  padding: 1.125rem 1.75rem;
  min-height: 56px;
  --btn-shadow:   var(--sh-md);
  --btn-shadow-h: var(--sh-lg);
  --press-shift:  6px;
}

/* ---- Square icon button ------------------------------------------------ */

.btn--icon {
  width: 48px;
  min-width: 48px;
  padding: 0;
  font-size: 1.125rem;
}

.btn--icon.btn--sm { width: 40px; min-width: 40px; }
.btn--icon.btn--lg { width: 56px; min-width: 56px; }

/* ---- Inline link styled as small bold link with arrow ----------------- */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--ink);
  border-bottom: 2px solid var(--stroke);
  padding-block: 0.125rem;
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}

.link-arrow::after {
  content: "→";
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}

@media (hover: hover) {
  .link-arrow:hover::after {
    transform: translateX(4px);
  }
}