/*
 * mw-btn: the button (docs/design-system.md, spec §5). Semantic tokens only;
 * MwComponentPurityTest holds it.
 *
 *   mw-btn--primary  navy fill: the main action on any surface
 *   mw-btn--cta      Bootstrap green: signing up only (spec D13)
 *   mw-btn--tonal    selected-blue fill: a card's own action. Only inside a
 *                    card: its fill is the ground's blue, so on the bare page
 *                    it has no edge (MwTonalPlacementTest)
 *   mw-btn--secondary white with an edge: the secondary beside a primary
 *                    (fmo3's name)
 *   mw-btn--ghost    no fill: low emphasis in a row
 *   mw-btn--danger   red fill: destructive only
 *   mw-btn--on-dark  outlined white, on the navy header
 *   mw-btn--sm, mw-btn--lg  sizes: 36px default, 30px small, 44px large (fmo3's)
 *   mw-btn--touch    a button tapped often: 44px on a coarse pointer, as fmo3
 *   mw-btn--block    fills its container's width (a phone form's main action)
 *
 * A link styled as a button keeps its own semantics: <a class="mw-btn">.
 */
.mw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.mw-btn--sm {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-3);
}

.mw-btn--lg {
  min-height: var(--tap-target);
  padding: 0 var(--space-5);
  font-size: var(--font-size-base);
}

@media (pointer: coarse) {
  .mw-btn--touch {
    min-height: var(--tap-target);
  }
}

.mw-btn--primary {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}

.mw-btn--cta {
  background: var(--color-cta);
  color: var(--color-text-on-primary);
}

.mw-btn--tonal {
  background: var(--color-selected);
  color: var(--color-primary-text);
}

.mw-btn--secondary {
  background: var(--color-surface);
  color: var(--color-primary-text);
  border-color: var(--color-border-strong);
}

.mw-btn--block {
  display: flex;
  align-self: stretch;
}

.mw-btn--ghost {
  background: transparent;
  color: var(--color-primary-text);
}

.mw-btn--danger {
  background: var(--color-danger-fill);
  color: var(--color-text-on-primary);
}

.mw-btn--on-dark {
  background: transparent;
  color: var(--color-on-dark);
  border-color: var(--color-on-dark);
}

@media (hover: hover) {
  .mw-btn--primary:hover {
    background: var(--color-primary-hover);
  }

  .mw-btn--cta:hover {
    background: var(--color-cta-hover);
  }

  .mw-btn--tonal:hover,
  .mw-btn--ghost:hover {
    background: var(--color-selected-border);
  }

  .mw-btn--secondary:hover {
    background: var(--color-selected);
    border-color: var(--color-selected-border);
  }

  .mw-btn--danger:hover {
    background: var(--color-danger-hover);
  }

  .mw-btn--on-dark:hover {
    background: var(--color-header-hover);
  }
}

.mw-btn--primary:active {
  background: var(--color-primary-active);
}

.mw-btn--cta:active {
  background: var(--color-cta-active);
}

.mw-btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.mw-btn:disabled,
.mw-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}