/* Base button styles
   Works for:
   - <a class="button">
   - <button>
   - <input type="submit|button|reset">
*/
.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  border: 1px solid var(--btn-border);

  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;

  cursor: pointer;
  user-select: none;
  min-height: 44px; /* touch target */
}

/* Hover */
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
  border-color: var(--btn-hover-border);
  color: var(--btn-secondary-text);
}

/* Active (subtle) */
.button:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
  transform: translateY(1px);
}

/* Disabled */
.button[aria-disabled="true"],
.button.is-disabled,
button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  border-color: var(--btn-disabled-border);
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

/* Primary button (Drupal commonly uses .button--primary) */
.button--primary,
input[type="submit"].button--primary,
button.button--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-border);
}

.button--primary:hover,
input[type="submit"].button--primary:hover,
button.button--primary:hover {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-bg);
  color: var(--btn-primary-text);
}

.button:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible {
  color: var(--btn-secondary-text);
}

.button--primary:focus-visible,
input[type="submit"].button--primary:focus-visible,
button.button--primary:focus-visible {
  color: var(--btn-primary-text);
}

/* Danger (optional — Drupal sometimes uses this class) */
.button--danger {
  background: var(--msg-error-border);
  color: #ffffff;
  border-color: var(--msg-error-border);
}

.button--danger:hover {
  filter: brightness(0.95);
}

/* Full width utility (handy for forms on mobile) */
.button--full {
  width: 100%;
}

/* Ensure focus ring is visible (your global :focus-visible handles it) */