[data-theme="light"] .alert,
.alert {
  --alert-padding-x: 1rem;
  --alert-padding-y: .5rem;
  --alert-bg: #fdefc4;
  --alert-color: #3c300b;

  --alert-red-bg: #da2e2e;
  --alert-red-color: #fff;

  padding: var(--alert-padding-y) var(--alert-padding-x);
  background-color: var(--alert-bg);
  color: var(--alert-color);
  border-radius: .25rem;
}

[data-theme="dark"] .alert {
  --alert-bg: #423a20;
  --alert-color: #ffe9a5;
  --alert-red-bg: #6b1d1d;
  --alert-red-color: #fff;
}

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