popup.css

/* Light Mode */
:root {
  --primary-100: #4285f4;
  --primary-200: #002fa7;
  --primary-300: #dffffd;
  --accent-100: #8a2be2;
  --accent-200: #ccccff;
  --text-100: #1f305e;  /* Dark blue text for light backgrounds */
  --text-200: #4d598c;  /* Light blue text for light backgrounds */
  --bg-100: #d7e8f9;    /* Light blue background */
  --bg-200: #afdbf5;    /* Lighter blue background */
  --bg-300: #191970;    /* Dark blue background */
}

body {
  font-family: Arial, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
  background-color: var(--bg-100); /* Light mode background */
  color: var(--text-100); /* Light mode text color */
}

#navbar {
  display: flex;
  justify-content: space-around;
  background-color: var(--bg-100);  /* Navbar background */
  padding: 10px;
}

#navbar button {
  background-color: var(--bg-200);  /* Button background */
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  color: var(--text-100);  /* Button text color */
  transition: background-color 0.3s ease, color 0.3s ease;
}

#navbar button:hover {
  background-color: var(--bg-300);  /* Button background on hover */
}

#container {
  padding: 10px;
  background-color: var(--bg-200);  /* Container background */
  color: var(--text-100);  /* Container text color */
}

#searchInput {
  width: 100%;
  padding: 5px;
  background-color: var(--bg-300);  /* Input background */
  color: var(--text-100);  /* Input text color */
}

#searchEngines {
  margin-top: 10px;
}

#searchEngines label {
  display: block;
  margin: 5px 0;
  color: var(--text-200);  /* Label text color */
}

#searchButton {
  width: 100%;
  padding: 5px;
  margin-top: 10px;
  background-color: var(--primary-100);  /* Search button background */
  color: var(--text-100);  /* Search button text color */
}

#results {
  margin-top: 20px;
  background-color: var(--bg-200);  /* Results background */
  color: var(--text-100);  /* Results text color */
}