/*
 * .alert — inline banner for feedback/errors
 *
 * Variants: default, destructive, success, warning, info
 */

.alert {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-background);
    color: var(--color-foreground);
}

.alert > svg,
.alert > [data-icon] {
    width: var(--space-4);
    height: var(--space-4);
    margin-top: 2px;
    flex-shrink: 0;
}

.alert-title {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-1) 0;
}

.alert-description {
    font-size: var(--text-sm);
    color: var(--color-muted-foreground);
    line-height: var(--leading-normal);
    margin: 0;
}

/* ─── Variants ─────────────────────────────────────── */
.alert-destructive {
    border-color: color-mix(in oklch, var(--color-destructive) 50%, transparent);
    background-color: color-mix(in oklch, var(--color-destructive) 8%, var(--color-background));
    color: var(--color-destructive);
}
.alert-destructive .alert-description {
    color: var(--color-destructive);
    opacity: 0.9;
}

.alert-success {
    border-color: color-mix(in oklch, var(--color-success) 40%, transparent);
    background-color: color-mix(in oklch, var(--color-success) 8%, var(--color-background));
    color: var(--color-success);
}
.alert-success .alert-description {
    color: var(--color-success);
    opacity: 0.9;
}

.alert-warning {
    border-color: color-mix(in oklch, var(--color-warning) 50%, transparent);
    background-color: color-mix(in oklch, var(--color-warning) 15%, var(--color-background));
    color: var(--color-foreground);
}
.alert-warning .alert-description {
    color: var(--color-foreground);
    opacity: 0.85;
}

.alert-info {
    border-color: color-mix(in oklch, var(--color-info) 40%, transparent);
    background-color: color-mix(in oklch, var(--color-info) 8%, var(--color-background));
    color: var(--color-info);
}
.alert-info .alert-description {
    color: var(--color-info);
    opacity: 0.9;
}