body {
  background-size: 400% 400%;
  animation: background-shift 30s ease infinite;
}

@keyframes background-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Theme variables */
:root {
  --color-primary: #c42217;
  --color-secondary: #2563eb;
  --color-surface: #ffffff;
  --color-on-primary: #ffffff;
  --color-on-secondary: #ffffff;
  --color-on-surface: #000000;
}

.islamic {
  --color-primary: #15803d;
  --color-secondary: #065f46;
  --color-surface: #f0fdf4;
  --color-on-primary: #ffffff;
  --color-on-secondary: #ffffff;
  --color-on-surface: #000000;
}

.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.text-on-primary { color: var(--color-on-primary) !important; }
.text-on-secondary { color: var(--color-on-secondary) !important; }
.bg-surface {
  background-color: var(--color-surface) !important;
  color: var(--color-on-surface);
}