:root {
  --alert-red:   #E53935; /* matches red petal */
  --alert-green: #43A047; /* matches green petal */
  --alert-blue:  #26C6DA; /* matches teal/blue petal */
  --alert-gold:  #FB8C00; /* matches orange petal */
  --alert-navy:  #2d405c; /* matches logotype navy */
  --alert-text:  #ffffff;
}

.alertbar {
  font-family: system-ui, Arial, sans-serif;
  border-radius: 12px;
  margin: 10px auto;
  max-width: 1200px;
}

/* Level colors */
.alert--info     { background: var(--alert-blue);  color: var(--alert-text); }
.alert--success  { background: var(--alert-green); color: var(--alert-text); }
.alert--warning  { background: var(--alert-gold);  color: var(--alert-text); }
.alert--critical { background: var(--alert-red);   color: var(--alert-text); }

.alertbar a.btn {
  background: #fff;
  color: var(--alert-navy);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.alertbar a.btn:hover {
  opacity: 0.9;
}


/* Add to alertbar.css (or a site-specific override) */
:root {
  /* SchoolSeed brand from logo */
  --ss-navy:  #1b3e5d; /* primary text/bg */
  --ss-teal:  #1abcb7; /* aqua */
  --ss-green: #3cb44b; /* leaf */
  --ss-red:   #ee3f3a; /* heart */
  --ss-gold:  #d8dd1e; /* yellow facet */
  --ss-orange:#f7941d; /* warm accent */
  --white:    #fff;
  --black:    #111;

  /* Alert defaults tuned for non-profit tone */
  --alert-bg: var(--ss-navy);
  --alert-fg: var(--white);
  --alert-accent: var(--ss-teal);
  --alert-ok: var(--ss-green);
  --alert-warn: var(--ss-gold);
  --alert-crit: var(--ss-red);
}