/* ── Alerts ────────────────────────────────────────────────────
   Same semantic vocabulary as badges - success/info/warning/danger
   - applied to a full-width message instead of an inline label.
   Used for Django messages framework output and for the Studio
   "you're viewing a draft" preview notice. See ../README.md.
*/
.alerts {
    margin-bottom: var(--space-5);
}

.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
    font-size: var(--type-small-size);
    border: 1px solid transparent;
}

.alert--success {
    background: var(--status-success-bg);
    border-color: var(--status-success-border);
    color: var(--status-success-text);
}

.alert--info {
    background: var(--status-info-bg);
    border-color: var(--status-info-border);
    color: var(--status-info-text);
}

.alert--warning {
    background: var(--status-warning-bg);
    border-color: var(--status-warning-border);
    color: var(--status-warning-text);
}

.alert--danger {
    background: var(--status-danger-bg);
    border-color: var(--status-danger-border);
    color: var(--status-danger-text);
}