@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

/* Light Mode Variables (Default) */
:root {
  --background-color: #f0f2f5; /* Light background */
  --primary-text-color: #333333; /* Dark text */
  --secondary-text-color: #555555;
  --button-background-color: #007bff;
  --button-text-color: #ffffff;
  --card-background-color: #ffffff;
  --card-border-color: #e0e0e0;
  --input-background-color: #ffffff;
  --input-border-color: #cccccc;
  --accent-color: #4CAF50; /* Accent for generator button */
  --gradient-start: #e2e8f0;
  --gradient-end: #ffffff;
}

/* Dark Mode Variables */
body.dark-mode {
  --background-color: #1a1a1d;
  --primary-text-color: #ffffff;
  --secondary-text-color: #cccccc;
  --button-background-color: #6200ee;
  --button-text-color: #ffffff;
  --card-background-color: #2c2c31;
  --card-border-color: #3e3e42;
  --input-background-color: #1f1f22;
  --input-border-color: #555555;
  --accent-color: #8bc34a; /* Adjusted accent for dark mode */
  --gradient-start: #1f1f22;
  --gradient-end: #121215;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--background-color);
  color: var(--primary-text-color);
  display: flex;
  flex-direction: column; /* Changed to column to stack elements */
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background-image: linear-gradient(to bottom right, var(--gradient-start), var(--gradient-end));
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

/* Theme Switcher Styling */
.theme-switcher {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
}

#theme-toggle {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#theme-toggle:hover {
  opacity: 0.9;
}

/* Load Comments Button Styling */
#load-comments-button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 1rem;
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#load-comments-button:hover {
  opacity: 0.9;
}