@import url("/design-system/tokens.css");

.aq-skip-link {
  position: fixed;
  z-index: 200;
  top: 8px;
  left: 8px;
  padding: 12px 16px;
  transform: translateY(calc(-100% - 16px));
  border: 2px solid #2c6fe8;
  border-radius: 8px;
  background: #fff;
  color: #071e28;
  font-weight: 700;
}

.aq-skip-link:focus,
.aq-skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #2c6fe8;
  outline-offset: 3px;
  box-shadow: 0 12px 32px rgba(7, 30, 40, 0.22);
}

.aq-alert {
  padding: var(--aq-spacing-4);
  border-left: 4px solid var(--aq-color-information);
  border-radius: var(--aq-geometry-radius-small);
  background: var(--aq-color-information-surface);
  color: var(--aq-color-text-primary);
}

.aq-alert--success {
  border-color: var(--aq-color-success);
  background: var(--aq-color-success-surface);
}

.aq-alert--error {
  border-color: var(--aq-color-error);
  background: var(--aq-color-error-surface);
}