/* Alert - "Speak softly, color carries meaning"
 * Clear communication without aggression
 * Uses design tokens directly for all visual properties
 */

.alert {
  padding: var(--space-comfort) calc(var(--space-comfort) * 1.25);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  font-size: var(--font-size-sm);
  transition: all var(--motion-gentle) var(--ease-natural);
  opacity: 0.98;
}

.alert:hover {
  opacity: 1;
  transform: translateX(2px);
}

/* Variant colors */
.alert-success {
  background-color: var(--color-alert-success-bg);
  border-left-color: var(--color-alert-success-border);
  color: var(--color-success-700);
}

.alert-warning {
  background-color: var(--color-alert-warning-bg);
  border-left-color: var(--color-alert-warning-border);
  color: var(--color-warning-700);
}

.alert-error {
  background-color: var(--color-alert-error-bg);
  border-left-color: var(--color-alert-error-border);
  color: var(--color-error-700);
}

.alert-info {
  background-color: var(--color-alert-info-bg);
  border-left-color: var(--color-alert-info-border);
  color: var(--color-info-700);
}

/* Dark mode variants */
@media (prefers-color-scheme: dark) {
  .alert-success {
    color: var(--color-success-300);
  }

  .alert-warning {
    color: var(--color-warning-300);
  }

  .alert-error {
    color: var(--color-error-300);
  }

  .alert-info {
    color: var(--color-info-300);
  }
}