/* Base Variables */
:root {
  --primary: #0057B8;   /* Default: Donation Blue */
  --accent: #A7D3F2;
  --contrast: #FFFFFF;
}

/* Theme Overrides */
body.donation {
  --primary: #002966;
  --accent: #80b3ff;
  --info: #002966;
  --neutral: #80b3ff;
}

body.rate {
  --primary: #4d0000;
  --accent: #990000;
  --highlight: #e6e600;
  --neutral: #FAFAFA;
}

body.win {
  --primary: #008000;
  --accent: #ccffcc;
  --info: #008000;
  --neutral: #ccffcc;
}

/* Global Styles */
body {
  margin: 0;
  font-family: sans-serif;
  background-color: var(--accent);
  color: var(--contrast);
}

.header {
  background-color: var(--primary);
  padding: 1rem;
  text-align: center;
  color: var(--contrast);
}

.hero {
  background: linear-gradient(to right, var(--primary), var(--accent));
  padding: 2rem;
  text-align: center;
}

.headline {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.cta-button {
  background-color: var(--primary);
  color: var(--contrast);
  padding: 0.75rem 1.5rem;
  border: none;
  font-size: 1rem;
  cursor: pointer;
}

.grid {
  display: flex;
  justify-content: space-around;
  padding: 2rem;
  background-color: var(--contrast);
  color: var(--primary);
}

.grid-item {
  background-color: var(--accent);
  padding: 1rem;
  border-radius: 8px;
  width: 30%;
  text-align: center;
}

.testimonial {
  padding: 2rem;
  background-color: var(--primary);
  color: var(--contrast);
  text-align: center;
}

.footer {
  background-color: var(--accent);
  padding: 1rem;
  text-align: center;
  color: var(--primary);
}

/* Theme Toggle UI (Now Using Emoji Links) */
.theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.5rem;
}

.theme-toggle .emoji-link {
  font-size: 1.5rem;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  transition: transform 0.2s ease;
}

.theme-toggle .emoji-link:hover {
  transform: scale(1.2);
}