:root {
  --radius: 16px;
  /* Defining colors here so they are self-contained */
  --success-bg: #d1fae5;
  --success-border: #a7f3d0;
  --success-text: #065f46;
  --error-bg: #fee2e2;
  --error-border: #fecaca;
  --error-text: #dc2626;
}

.error-notification,
.success-notification {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  display: none;
  font-weight: 500;
  border: 1px solid;
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  min-width: 300px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.error-notification {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}

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