/* ═══════════════════════════════════════════════════════════════════════════
   Alert — inline notification box for info, success, warning, danger messages.
   ═══════════════════════════════════════════════════════════════════════════ */

.alert {
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    border-left: 3px solid;
    font-size: var(--text-sm);
    line-height: 1.6;
    margin-bottom: var(--space-6);
    background-color: var(--bg-tertiary);
}

.alert > *:last-child { margin-bottom: 0; }

.alert__title {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--space-1);
}

/* ── Variants ─────────────────────────────────────────────────────────────── */

.alert--info {
    border-color: var(--border-medium);
    color: var(--text-secondary);
}

.alert--info .alert__title { color: var(--text-primary); }

.alert--success {
    border-color: var(--success);
    color: var(--success);
}

.alert--success .alert__title { color: var(--success); }

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

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

.alert--danger {
    border-color: var(--danger);
    color: var(--danger);
}

.alert--danger .alert__title { color: var(--danger); }