# 🎨 Color Management System Demo

## Gradient Cards (Alert Component Style)

### ✓ Success

Beautiful green gradient background with left border accent

### ⚠ Warning

Beautiful orange gradient background with left border accent

### ✕ Error

Beautiful red gradient background with left border accent

### ℹ Info

Beautiful blue gradient background with left border accent

`.card-success {
background: var(--gradient-success);
border-left-color: var(--color-success-border);
}`

## Button Colors

`.btn-primary {
background-color: var(--color-primary);
}
.btn-primary:hover {
background-color: var(--color-primary-dark);
}`

## Color Palette

--color-primary
--color-success
--color-warning
--color-error
--color-info
--color-secondary

## Opacity Variants

10%
30%
50%
70%
90%
`.overlay {
background-color: rgba(var(--color-primary-rgb), 0.1);
}`