/*!
 * Glory Theme — Shared button primitives
 * Global defaults used across header, pages, forms, and CPT bridges.
 */

.btn,
button.button,
input[type="submit"].button,
.wp-element-button,
.wp-block-button__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.8rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur) var(--ease),
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    filter var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.btn:hover,
button.button:hover,
input[type="submit"].button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover{
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border-color: color-mix(in srgb, var(--brand) 18%, transparent);
}

.btn:focus-visible,
button.button:focus-visible,
input[type="submit"].button:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

.btn-primary,
button.button-primary,
input[type="submit"].button-primary{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border-color: transparent;
  color: #fff !important;
  box-shadow: var(--shadow2);
}

.btn-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff !important;
  filter: saturate(1.05);
}

html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] button.button:hover,
html[data-theme="dark"] input[type="submit"].button:hover,
html[data-theme="dark"] .wp-element-button:hover,
html[data-theme="dark"] .wp-block-button__link:hover{
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border-color: color-mix(in srgb, var(--brand) 22%, transparent);
}