:root {
  /* Dark mode (default) */
  --background-color: #1a1a1a;
  --card-background-color: #2b2b2b;
  --primary-color: #007bff;
  --text-color: #ffffff;
  --number-color-1: #ff4b4b;
  --number-color-2: #ff9800;
  --number-color-3: #ffc107;
  --number-color-4: #4caf50;
  --number-color-5: #2196f3;
  --number-color-6: #9c27b0;
  --button-hover-shadow: rgba(0, 123, 255, 0.5);
}

[data-theme="light"] {
  --background-color: #f0f2f5;
  --card-background-color: #ffffff;
  --primary-color: #0056b3;
  --text-color: #1a1a1a;
  --button-hover-shadow: rgba(0, 86, 179, 0.3);
}

body {
  margin: 0;
  padding: 2rem;
  font-family: 'Poppins', sans-serif;
  background-color: var(--background-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23333' fill-opacity='0.1' d='M0 2h2V0h2v4H2v-2H0V2z'/%3E%3C/svg%3E");
  color: var(--text-color);
  display: grid;
  place-items: center;
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: var(--card-background-color);
  color: var(--text-color);
  border: 1px solid var(--primary-color);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: all 0.3s ease;
  z-index: 1000;
}

#theme-toggle:hover {
  background: var(--primary-color);
  color: #fff;
}