/* Shared production action components.
   Source of truth for pill-action.tsx equivalents used by the Mini App and
   the admin workspace. Keep variants token-only so both surfaces stay in sync. */
.button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}
.button:focus-visible { outline: 2px solid var(--color-line-strong); outline-offset: 2px; }
.icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--button-height);
  height: var(--button-height);
  border: 0;
  padding: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-dim);
}
.icon-btn:active { background: var(--surface-2); }
.icon-btn svg { width: var(--button-icon-size); height: var(--button-icon-size); }
.icon-btn:focus-visible {
  outline: 2px solid var(--color-line-strong);
  outline-offset: 2px;
  border-radius: var(--radius-inner);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  width: 100%;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-inline);
  border: 0;
  border-radius: var(--radius-pill);
  font-variation-settings: "wdth" var(--font-width-fixel-text);
  font-size: var(--button-font-size);
  line-height: var(--button-line-height);
  font-weight: var(--font-weight-medium);
  text-align: center;
  transition: background-color var(--transition-base), transform .12s ease;
}
.btn:active { transform: scale(.985); }
.btn--primary, .btn--green { background: var(--color-action-primary); color: var(--color-action-primary-text); }
.btn--contrast, .btn--dark { background: var(--color-ink); color: var(--color-surface); }
.btn--secondary, .btn--neutral { background: var(--color-action-neutral); color: var(--color-ink); }
.btn--surface { background: var(--color-surface); color: var(--color-ink); }
@media (hover: hover) {
  .btn--primary:hover, .btn--green:hover { background: var(--color-action-primary-hover); }
  .btn--secondary:hover, .btn--neutral:hover { background: var(--color-action-neutral-hover); }
  .btn--surface:hover { background: var(--color-line); }
}
@media (hover: none) {
  .btn:active { transform: none; }
}
.btn--fit { width: auto; flex: none; }
.btn .arw { width: var(--button-icon-size); height: var(--button-icon-size); flex: none; fill: currentColor; }
.btn:focus-visible { outline: 2px solid var(--color-line-strong); outline-offset: 2px; }
.btn:disabled,
.btn:disabled:hover {
  background: var(--color-action-disabled);
  color: var(--color-action-disabled-text);
  cursor: not-allowed;
  transform: none;
}
.btn--lg {
  display: flex;
  width: 100%;
  min-height: var(--button-lg-height);
  gap: var(--button-lg-gap);
  padding: var(--button-lg-padding-block) var(--space-4);
  font-variation-settings: normal;
  font-size: var(--button-lg-font-size);
  line-height: var(--button-lg-line-height);
}
.btn--lg .arw { width: var(--button-lg-icon-size); height: var(--button-lg-icon-size); }