/* Cyber Armor Systems — Alerts.  Requires cas-tokens.css.
   Style: left accent border on the surface, no fill (Option B). The status colour
   is carried by the BORDER only — a non-text element that needs 3:1 vs the surface,
   which every --cas-alert-* token clears in both themes. The text uses the theme
   text tokens (always AA+), so the design never leans on a status colour as text —
   sidestepping the sub-4.5:1 cases (warn light 4.34, crit dark 4.08). */

.cas-alert {
  display: flex;
  gap: var(--cas-space-12);
  align-items: flex-start;
  padding: var(--cas-space-12) var(--cas-space-16);
  border-left: 4px solid var(--cas-theme-border);
  border-radius: 0 var(--cas-radius-sm) var(--cas-radius-sm) 0;
  color: var(--cas-theme-text-body);
  font-size: var(--cas-text-caption);
  line-height: var(--cas-lh-body);
}
/* Optional bold lead — theme text, never the status colour (keeps it AA+). */
.cas-alert > strong,
.cas-alert .cas-alert-title { color: var(--cas-theme-text); font-weight: 700; }

.cas-alert-warn { border-left-color: var(--cas-alert-warn); }
.cas-alert-crit { border-left-color: var(--cas-alert-crit); }
.cas-alert-ok   { border-left-color: var(--cas-alert-ok); }
.cas-alert-info { border-left-color: var(--cas-alert-info); }

/* Optional leading status dot, coloured to match the border (also non-text 3:1). */
.cas-alert .cas-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
.cas-alert-warn .cas-dot { background: var(--cas-alert-warn); }
.cas-alert-crit .cas-dot { background: var(--cas-alert-crit); }
.cas-alert-ok   .cas-dot { background: var(--cas-alert-ok); }
.cas-alert-info .cas-dot { background: var(--cas-alert-info); }