/* --- Default Theme (Site 1) --- */
.site-1 {
  --main-color: #007bff; /* Blue */
  --bg-color: #c20000;
}

/* --- Site 2 Theme --- */
.site-2 {
  --main-color: #ff4500; /* Orange-Red */
  --bg-color: #f0f0f0;
}

/* --- Site 3 Theme --- */
.site-3 {
  --main-color: #28a745; /* Green */
  --bg-color: #eeffee;
}

/* --- GENERAL STYLES (Applied to everyone) --- */
body {
  background-color: var(--bg-color); /* Uses the variable defined above */
  font-family: Arial, sans-serif;
}

h1 {
  color: var(--main-color); /* Will be Blue on Site 1, Red on Site 2 */
}

button, .main-nav a:hover {
  background-color: var(--main-color);
  color: white;
}