/* ICOS Alert Color System */
:root {
  /* Background Colors */
  --information-bg: rgba(145, 208, 255, 1);
  --success-bg: rgba(4, 123, 93, 1);
  --caution-bg: rgba(255, 230, 0, 1);
  --warning-bg: rgba(255, 241, 227, 1);
  --critical-bg: rgba(254, 232, 235, 1);
  --emphasis-bg: rgba(0, 91, 211, 1);

  /* Complementary Text Colors (for readability) */
  --information-text: rgba(0, 84, 166, 1);
  --success-text: rgba(255, 255, 255, 1);
  --caution-text: rgba(133, 77, 14, 1);
  --warning-text: rgba(154, 52, 18, 1);
  --critical-text: rgba(153, 27, 27, 1);
  --emphasis-text: rgba(255, 255, 255, 1);

  /* Border Colors (slightly darker variants) */
  --information-border: rgba(59, 130, 246, 1);
  --success-border: rgba(34, 197, 94, 1);
  --caution-border: rgba(245, 158, 11, 1);
  --warning-border: rgba(249, 115, 22, 1);
  --critical-border: rgba(239, 68, 68, 1);
  --emphasis-border: rgba(37, 99, 235, 1);

  /* Icon Colors */
  --information-icon: rgba(59, 130, 246, 1);
  --success-icon: rgba(34, 197, 94, 1);
  --caution-icon: rgba(245, 158, 11, 1);
  --warning-icon: rgba(249, 115, 22, 1);
  --critical-icon: rgba(239, 68, 68, 1);
  --emphasis-icon: rgba(37, 99, 235, 1);
}

/* Alert Component Classes */
.alert-information {
  background-color: var(--information-bg);
  color: var(--information-text);
  border-color: var(--information-border);
}

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

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

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

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

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

/* Button Variants */
.btn-information {
  background-color: var(--information-border);
  color: white;
}

.btn-information:hover {
  background-color: rgba(37, 99, 235, 1);
}

.btn-success {
  background-color: var(--success-border);
  color: white;
}

.btn-success:hover {
  background-color: rgba(21, 128, 61, 1);
}

.btn-caution {
  background-color: var(--caution-border);
  color: white;
}

.btn-caution:hover {
  background-color: rgba(217, 119, 6, 1);
}

.btn-warning {
  background-color: var(--warning-border);
  color: white;
}

.btn-warning:hover {
  background-color: rgba(234, 88, 12, 1);
}

.btn-critical {
  background-color: var(--critical-border);
  color: white;
}

.btn-critical:hover {
  background-color: rgba(220, 38, 38, 1);
}

.btn-emphasis {
  background-color: var(--emphasis-bg);
  color: white;
}

.btn-emphasis:hover {
  background-color: rgba(29, 78, 216, 1);
}

/* Utility Classes */
.bg-information { background-color: var(--information-bg); }
.bg-success { background-color: var(--success-bg); }
.bg-caution { background-color: var(--caution-bg); }
.bg-warning { background-color: var(--warning-bg); }
.bg-critical { background-color: var(--critical-bg); }
.bg-emphasis { background-color: var(--emphasis-bg); }

.text-information { color: var(--information-text); }
.text-success { color: var(--success-text); }
.text-caution { color: var(--caution-text); }
.text-warning { color: var(--warning-text); }
.text-critical { color: var(--critical-text); }
.text-emphasis { color: var(--emphasis-text); }

.border-information { border-color: var(--information-border); }
.border-success { border-color: var(--success-border); }
.border-caution { border-color: var(--caution-border); }
.border-warning { border-color: var(--warning-border); }
.border-critical { border-color: var(--critical-border); }
.border-emphasis { border-color: var(--emphasis-border); }

/* Icon Colors */
.icon-information { color: var(--information-icon); }
.icon-success { color: var(--success-icon); }
.icon-caution { color: var(--caution-icon); }
.icon-warning { color: var(--warning-icon); }
.icon-critical { color: var(--critical-icon); }
.icon-emphasis { color: var(--emphasis-icon); }