/* Copper-700, not brand copper-600: the label is 15px uppercase bold, so
   it needs 4.5:1 and white on copper-600 is only 3.6:1. See the copper
   note in tokens.css. */
.c-button {
  --button-bg: var(--color-accent-fill);
  --button-color: var(--color-white);
  --button-border: var(--color-accent-fill);
  display: inline-flex;
  min-height: 3.375rem;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: .95rem 2.1rem;
  border: 2px solid var(--button-border);
  border-radius: var(--radius-2);
  background: var(--button-bg) !important;
  color: var(--button-color) !important;
  font-weight: 800;
  font-size: var(--text-small);
  letter-spacing: var(--tracking-button);
  line-height: 1;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}

.c-button:hover:not(:disabled) {
  --button-bg: var(--color-accent-hover);
  --button-border: var(--color-accent-hover);
}

.c-button:disabled,
.c-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
}

.c-button--large { min-height: 4.375rem; padding: 1.25rem 3.25rem; }
.c-button--small { min-height: 2.75rem; padding: .6rem 1.4rem; }

/* The horizontal padding is what makes these buttons overrun narrow
   viewports — a 2.1rem inset either side is 67px of a 320px screen
   before a single character of the label. Tighten it on phones and let
   long labels wrap rather than push the layout sideways. */
@media (max-width: 30rem) {
  .c-button {
    padding-inline: var(--space-5);
    text-wrap: balance;
  }

  .c-button--large {
    min-height: 3.75rem;
    padding: 1rem var(--space-6);
  }
}

.c-button--dark {
  --button-bg: var(--color-ink);
  --button-border: var(--color-ink);
}

.c-button--dark:hover:not(:disabled) {
  --button-bg: var(--color-dark-raised);
  --button-border: var(--color-dark-raised);
}

.c-button--outline {
  --button-bg: transparent;
  --button-color: var(--color-ink);
  --button-border: var(--color-ink);
}

.c-button--outline:hover:not(:disabled) {
  --button-bg: var(--color-ink);
  --button-color: var(--color-white);
}

.c-button--inverse {
  --button-bg: var(--color-white);
  --button-color: var(--color-accent);
  --button-border: var(--color-white);
}

.c-button--inverse:hover:not(:disabled) {
  --button-bg: var(--color-surface);
  --button-border: var(--color-surface);
}