I've created a pure HTML and CSS version of the shadcn Alert component 1 with the following features:

1. Two variants: default and destructive (using data-variant attribute)
2. Proper semantic HTML structure with ARIA roles for accessibility
3. CSS custom properties (variables) for easy theming
4. Responsive design that matches the original component
5. SVG icons included inline for the examples
6. Proper spacing and typography matching the original design

To use this component, you can simply copy the HTML structure and the CSS styles. The alert can be customized by:

1. Modifying the CSS variables in the :root selector
2. Adding or removing the data-variant="destructive" attribute to switch variants
3. Changing the icon SVG
4. Modifying the content within the alert-title and alert-description classes

The component is fully accessible and works across all modern browsers without any JavaScript dependencies.

I've made the following changes:

1. Changed all color references to use #dc2626 (the red you specified)
2. Simplified the CSS by using a single --alert-color variable
3. Replaced the previous icon with the Lucide circle-alert icon
4. Removed the destructive variant since we're now using a specific color scheme
5. Updated the icon and text colors to consistently use the specified red color

The alert now has:

• Red border (#dc2626)
• Red text (#dc2626)
• Red circle-alert icon (#dc2626)
• Clean and consistent styling throughout

You can easily modify the color by changing the --alert-color variable in the CSS if needed.