/* Alert banner — the one place a banner's appearance is defined.
 *
 * Same shape as toast.css, and for the same reason. The macro carried a
 * `severity_map` dict holding seven Tailwind class strings per severity —
 * twenty-one in all — so the caller passed severity="error" and the template
 * turned that straight back into shades. Now the macro emits
 * `alert-banner--error` and this file says what that means.
 *
 * Each state sets seven custom properties on the container and the parts
 * inherit them, so re-toning a severity is one declaration, not seven.
 *
 * ON THE VALUES
 * Twelve of the eighteen colours are the exact value the utility had. Six moved
 * onto a token the design system already held rather than adding a new
 * near-duplicate — the largest shift is dE 4.3 on the warning background, two
 * near-whites apart. That direction is deliberate: this palette already carried
 * several shades of one colour, and adding six more to preserve Tailwind's
 * spelling exactly would have made that worse.
 *
 * No dark-mode block: this component never had one. Adding it here would be a
 * behaviour change wearing a refactor's clothes.
 */

.alert-banner {
    background-color: var(--banner-bg);
    border-color: var(--banner-border);
}

.alert-banner__icon-badge {
    background-color: var(--banner-icon-bg);
}

.alert-banner__icon {
    color: var(--banner-icon);
}

.alert-banner__title {
    color: var(--banner-title);
}

.alert-banner__body {
    color: var(--banner-body);
}

.alert-banner__dismiss {
    color: var(--banner-body);
}

.alert-banner__dismiss:hover {
    background-color: var(--banner-icon-bg);
}

/* States --------------------------------------------------------------------
 * One block per severity. This is what you edit to change a banner's colour.
 * The comment on each line names the utility it replaces, so the mapping stays
 * checkable against git history.
 */

/* Warning is also the fallback: the macro's severity_map.get(...) falls back
 * here for an unknown severity, so a typo renders as a warning rather than as
 * an unpainted banner.
 */
.alert-banner--warning {
    --banner-bg: var(--banner-warning-bg);
    --banner-border: var(--banner-warning-border);
    --banner-title: var(--coverage-partial-fg);
    --banner-body: var(--warning-strong-fg);
    --banner-icon-bg: var(--warning-soft-bg);
    --banner-icon: var(--banner-warning-fg);
}

.alert-banner--error {
    --banner-bg: var(--sev-critical-bg);
    --banner-border: var(--sev-critical-border);
    --banner-title: var(--danger-darkest-fg);
    --banner-body: var(--danger-strong-fg);
    --banner-icon-bg: var(--status-danger-bg);
    --banner-icon: var(--danger-fg);
}

.alert-banner--info {
    --banner-bg: var(--status-info-bg);
    --banner-border: var(--info-border);
    --banner-title: var(--sev-low-fg);
    --banner-body: var(--info-deep-fg);
    --banner-icon-bg: var(--info-bg);
    --banner-icon: var(--chart-line-info);
}