.aabha-button,
.button-link {
  min-height: var(--aabha-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aabha-space-2);
  padding: 0.75rem 1.125rem;
  color: var(--aabha-color-text-inverse);
  background: var(--aabha-color-brand-strong);
  border: 1px solid var(--aabha-color-brand-strong);
  border-radius: var(--aabha-radius-sm);
  font-weight: 650;
  cursor: pointer;
  transition:
    color var(--aabha-motion-fast) var(--aabha-ease-standard),
    background var(--aabha-motion-fast) var(--aabha-ease-standard),
    border-color var(--aabha-motion-fast) var(--aabha-ease-standard);
}

.aabha-button:hover,
.aabha-button:focus-visible,
.button-link:hover,
.button-link:focus-visible {
  color: var(--aabha-color-brand-strong);
  background: transparent;
}

.aabha-button--quiet,
.button-link.light {
  color: var(--aabha-color-text);
  background: var(--aabha-color-surface-tinted);
  border-color: var(--aabha-color-surface-tinted);
}

.aabha-button--quiet:hover,
.aabha-button--quiet:focus-visible,
.button-link.light:hover,
.button-link.light:focus-visible {
  color: var(--aabha-color-text-inverse);
  background: transparent;
  border-color: currentColor;
}

.aabha-button--text,
.text-link {
  min-height: var(--aabha-touch-target);
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0;
  color: var(--aabha-color-brand-strong);
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  font-weight: 650;
}

.aabha-field {
  display: grid;
  gap: var(--aabha-space-2);
}

.aabha-field label,
.aabha-field__label {
  color: var(--aabha-color-brand-strong);
  font-size: var(--aabha-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.aabha-input,
.aabha-select,
.aabha-textarea {
  width: 100%;
  min-height: var(--aabha-control-height);
  padding: 0.75rem 0;
  color: var(--aabha-color-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--aabha-color-border-strong);
  border-radius: 0;
}

.aabha-input:focus,
.aabha-select:focus,
.aabha-textarea:focus {
  border-bottom-color: var(--aabha-color-brand);
  outline: 0;
  box-shadow: 0 2px 0 var(--aabha-color-brand);
}

.aabha-field__hint,
.aabha-field__error {
  margin: 0;
  font-size: var(--aabha-text-sm);
}

.aabha-field__hint {
  color: var(--aabha-color-text-muted);
}

.aabha-field__error {
  color: var(--aabha-color-critical);
  font-weight: 650;
}

.aabha-alert {
  padding: var(--aabha-space-4) var(--aabha-space-5);
  border-inline-start: 3px solid var(--aabha-color-info);
  background: var(--aabha-color-surface-tinted);
}

.aabha-alert[data-tone="positive"] {
  border-inline-start-color: var(--aabha-color-positive);
}

.aabha-alert[data-tone="caution"] {
  border-inline-start-color: var(--aabha-color-caution);
}

.aabha-alert[data-tone="critical"] {
  border-inline-start-color: var(--aabha-color-critical);
}

.aabha-alert > :first-child,
.aabha-empty-state > :first-child {
  margin-top: 0;
}

.aabha-alert > :last-child,
.aabha-empty-state > :last-child {
  margin-bottom: 0;
}

.aabha-empty-state,
.library-empty {
  max-width: 40rem;
  padding: var(--aabha-space-10) 0;
  border-block: 1px solid var(--aabha-color-border);
}

.aabha-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.25rem 0.625rem;
  color: var(--aabha-color-brand-strong);
  background: var(--aabha-color-surface-tinted);
  border-radius: var(--aabha-radius-pill);
  font-size: var(--aabha-text-xs);
  font-weight: 700;
}

.aabha-progress {
  height: 0.25rem;
  overflow: hidden;
  background: var(--aabha-color-surface-tinted);
}

.aabha-progress > span {
  width: var(--aabha-progress-value, 0%);
  height: 100%;
  display: block;
  background: var(--aabha-color-brand);
}

.aabha-card {
  padding-block: var(--aabha-space-6);
  border-block-start: 1px solid var(--aabha-color-border-strong);
  border-block-end: 1px solid var(--aabha-color-border);
}

.aabha-mobile-bar {
  min-height: 3.875rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: rgb(252 251 250 / 96%);
  border-top: 1px solid var(--aabha-color-border);
  backdrop-filter: blur(16px);
}

.aabha-mobile-bar a,
.aabha-mobile-bar button {
  min-width: var(--aabha-touch-target);
  min-height: var(--aabha-touch-target);
}

@media (max-width: 38.75rem) {
  .aabha-button,
  .button-link {
    min-height: var(--aabha-touch-target);
  }

  .aabha-empty-state,
  .library-empty {
    padding-block: var(--aabha-space-8);
  }
}