/* Canonical text actions. Explicit .btn consumers share the readable action
   scale; navigation, language, icon and media utilities keep their patterns. */
.btn:not([data-set-lang]):not(.icon-btn):not(.mini-btn) {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-inline-size: var(--control-height);
  min-block-size: var(--control-height);
  max-inline-size: 100%;
  padding-block: var(--space-4);
  padding-inline: var(--space-6);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  font-weight: 500;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-ui),
    border-color var(--motion-fast) var(--ease-ui), color var(--motion-fast) var(--ease-ui);
}
.btn.btn-primary:not([data-set-lang]):not(.icon-btn) {
  background: transparent;
  color: var(--action-ink);
  border: calc(var(--space-1) / 2) solid var(--action-ink);
  font-weight: 700;
}
.btn.btn-secondary:not([data-set-lang]) {
  background: transparent;
  color: var(--action-control-ink, var(--ink));
  border: calc(var(--space-1) / 2) solid var(--action-control-border, var(--border-strong));
}
/* A destructive action keeps its semantic ink through the same state rules.
   The alias is local to this button; disabled state still uses muted tokens. */
.btn.btn-danger {
  --action-ink: var(--danger);
  --action-tint: color-mix(in srgb, var(--danger) 12%, var(--surface));
  --ring: var(--danger);
  color: var(--danger);
  border-color: var(--danger);
}
/* Compact text utilities are explicit exceptions; their hit target remains
   full size. A form's principal action uses the standard .btn scale. A
   reading surface that requires body-size actions sets the local alias
   --action-compact-type on its container instead of out-ranking this rule. */
.btn.btn-sm:not([data-set-lang]):not(.icon-btn):not(.mini-btn) {
  font-size: var(--action-compact-type, var(--type-h4));
  padding-block: var(--space-3);
}
.btn:not([data-set-lang]):not(.icon-btn):not(.mini-btn):not(:disabled):is(:hover, :focus-visible) {
  background: var(--action-tint);
  color: var(--action-ink);
  border-color: var(--action-ink);
}
.btn:not([data-set-lang]):not(.icon-btn):not(.mini-btn):focus-visible {
  outline: var(--space-1) solid var(--ring);
  outline-offset: var(--space-2);
}
.btn:not([data-set-lang]):not(.icon-btn):not(.mini-btn):disabled {
  color: var(--ink-muted);
  border-color: var(--border);
  background: transparent;
  box-shadow: none;
  cursor: not-allowed;
}
/* Identity's camera stage intentionally keeps readable stage ink in either
   saved page theme. These are local aliases, not another action component. */
.verification-main[data-stage] {
  --action-control-ink: var(--midnight-ink);
  --action-control-border: var(--midnight-ink);
}
/* These state aliases belong to buttons. The consent choice keeps its own
   page palette so its checked tint remains readable with its label ink. */
.verification-main[data-stage] .btn {
  --action-ink: var(--midnight-ink);
  --action-tint: var(--midnight-veil);
  --ring: var(--midnight-ink);
}
@media (forced-colors: active) {
  .btn:not([data-set-lang]):not(.icon-btn):not(.mini-btn) {
    forced-color-adjust: auto;
    border-color: currentColor;
  }
}