@layer components {
  .alert {
    display: flex;
    gap: var(--s4);
    padding: var(--s4) var(--s5);
    border-radius: var(--r-md);
    border-left: 3px solid;
    font-size: 14px;
    line-height: 1.5;
  }
  .alert-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
  .alert-content { flex: 1; }
  .alert-title { font-weight: 600; margin-bottom: 2px; }
  .alert-info    { background: var(--forest-50); border-color: var(--forest-500); color: var(--forest-700); }
  .alert-success { background: var(--success-50); border-color: var(--success-500); color: var(--success-600); }
  .alert-warning { background: var(--warning-50); border-color: var(--warning-500); color: var(--warning-500); }
  .alert-danger  { background: var(--danger-50); border-color: var(--danger-500); color: var(--danger-600); }
}