/* ============================================================
   .uk-status-banner — unified canonical status banner (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the legacy declaration in style.css:
     .status-banner-preview + .status-banner-preview.status-operational
        (home hero status-page mockup; only "operational" tone shipped,
        --degraded / --outage / --maintenance always lived as TODOs in the
        catalog meta)

   Distinct from the .uk-alert family:
     .uk-alert is a tighter inline uk-alert with icon + body for in-content use.
     .uk-status-banner is the prominent top-of-page status indicator —
     centered, weighty, sits above a status page or a status-page mockup.

   Slots:
     .uk-status-banner                root (flex row, centered, padding-md)
       <svg>                            optional leading icon (consumer-supplied)
       text                             "All systems operational" etc.

   Tone modifiers (replace plain .status-* class names):
     --operational    primary-tinted (brand) — replaces .status-operational
     --degraded       warning-tinted
     --outage         error-tinted
     --maintenance    maintenance-tinted

   Default tone is neutral (card chrome).
   ============================================================ */

.uk-status-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    font-weight: 600;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.uk-status-banner svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ---------- Tone modifiers ---------- */
.uk-status-banner--operational {
    background: rgba(var(--color-primary-rgb), 0.1);
    border-color: rgba(var(--color-primary-rgb), 0.3);
    color: var(--color-info);
}

.uk-status-banner--degraded {
    background: rgba(var(--color-warning-rgb), 0.1);
    border-color: rgba(var(--color-warning-rgb), 0.35);
    color: var(--color-warning);
}

.uk-status-banner--outage {
    background: rgba(var(--color-error-rgb), 0.1);
    border-color: rgba(var(--color-error-rgb), 0.35);
    color: var(--color-error);
}

.uk-status-banner--maintenance {
    background: rgba(var(--color-maintenance-rgb), 0.1);
    border-color: rgba(var(--color-maintenance-rgb), 0.35);
    color: var(--color-maintenance);
}