/* Buttons. Variants: --gold (primary on dark), --green (primary on light),
   --outline-light (on dark backgrounds), --outline (on light), --small. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--button-height);
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-green);
  color: var(--color-white);
  font: inherit;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.button:hover { background: var(--color-green-hover); color: var(--color-white); }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }

.button--gold { background: var(--color-gold); color: var(--color-ink); }
.button--gold:hover { background: #E4C97F; color: var(--color-ink); }

.button--outline-light {
  background: transparent;
  color: var(--color-white);
  border-color: rgb(255 255 255 / 0.45);
  padding-inline: 26px;
}
.button--outline-light:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.7); color: var(--color-white); }

.button--outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-input-border);
}
.button--outline:hover { background: var(--color-white); color: var(--color-green); }

.button--small { min-height: var(--button-height-sm); padding-inline: 20px; font-size: var(--text-sm); }
.button--nav { min-height: 46px; padding-inline: 22px; font-size: var(--text-base); }