:root {
  /* Neutral Colors */
  --neutral-900: hsl(227, 75%, 14%);
  --neutral-800: hsl(226, 25%, 17%);
  --neutral-700: hsl(225, 23%, 24%);
  --neutral-600: hsl(226, 11%, 37%);
  --neutral-300: hsl(0, 0%, 78%);
  --neutral-200: hsl(217, 61%, 90%);
  --neutral-100: hsl(0, 0%, 93%);
  --neutral-0: hsl(200, 60%, 99%);

  /* Red Colors */
  --red-400: hsl(3, 86%, 64%);
  --red-500: hsl(3, 71%, 56%);
  --red-700: hsl(3, 77%, 44%);

  /* Gradients */
  --gradient-light: linear-gradient(180deg, #ebf2fc 0%, #eef8f9 100%);
  --gradient-dark: linear-gradient(180deg, #040918 0%, #091540 100%);
}

@font-face {
  font-family: 'Noto Sans';
  src: url('./fonts/NotoSans-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900; /* For variable font range */
}

body {
  background-image: var(--gradient-light);
  font-family: 'Noto Sans', sans-serif;
  font-weight: 400;
  padding: 1rem;
  margin: 2rem 5rem;
  transition: background-image 0.5s ease, background-color 0.5s ease,
    color 0.5s ease;
}

/* Dark mode */

body.dark-mode {
  background-image: var(--gradient-dark);
  color: var(--neutral-0);
}

body.dark-mode .theme-toggle_btn {
  background-color: var(--neutral-700);
}

p {
  font-size: 16px;
}

button {
  cursor: pointer;
  border: 0;
}

li {
  list-style: none;
}

.header_logo {
  background-color: var(--neutral-0);
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  display: flex;
  justify-content: space-between;
}

header .theme-toggle_btn {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border: 1px solid var(--neutral-0);
  border-radius: 0.75rem;
  cursor: pointer;
  background-color: var(--neutral-100);
  transition: background-color 0.3s ease;
}

header nav {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter-btns {
  display: flex;
  align-items: center;
  justify-content: center;
}

.choice {
  text-align: center;
  padding: 0.2rem 0.75rem;
  border-radius: 1rem;
  margin-left: 2rem;
  border: 1px solid var(--neutral-300);
  background-color: var(--neutral-0);
  color: var(--neutral-900);
  cursor: pointer;
  transition: all 0.3s ease;
}

body.dark-mode .choice {
  background-color: var(--neutral-800);
  color: var(--neutral-0);
  border: 1px solid var(--neutral-700);
}

body.dark-mode .choice:hover {
  background-color: var(--red-500);
  color: var(--neutral-0);
}

body.dark-mode .choice.selected {
  background-color: var(--red-500);
  color: var(--neutral-0);
  border: 1px solid var(--neutral-700);
}

.choice:hover {
  background-color: var(--red-500);
  color: var(--neutral-0);
}

.choice:focus {
  outline: none;
  border: 1px solid var(--red-500);
  box-shadow: 0 0 0 2px var(--red-500);
}

.choice input {
  display: none;
}

.choice.selected {
  background-color: var(--red-400);
  color: var(--neutral-0);
  border: none;
}

.choice label {
  cursor: pointer;
  display: block;
  width: 100%;
  height: 100%;
}

.btn-rmv {
  background-color: var(--neutral-0);
  border-radius: 1rem;
  padding: 0.5rem 0.75rem;
}

.btn-rmv {
  font-weight: bold;
  padding: 0.5rem;
  border: 1px solid var(--neutral-300);
}

/* Dark theme */

body.dark-mode .btn-rmv {
  color: var(--neutral-300);
  background-color: transparent;
  border-radius: 1rem;
  border: 1px solid var(--neutral-300);
}

body.dark-mode .btn-rmv:hover {
  background-color: var(--red-500);
  color: var(--neutral-900);
  border: 1px solid var(--neutral-900);
}

.btn-rmv:hover {
  background-color: var(--red-500);
  color: var(--neutral-0);
}

.btn-rmv:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--red-500);
  background-color: var(--neutral-200);
}

body.dark-mode .btn-rmv:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--red-500);
  background-color: var(--neutral-300);
}
.btn-rmv:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--red-500);
  background-color: var(--neutral-200);
}

.toggle-switch {
  position: relative;
  height: 1rem;
  width: 2rem;
  border-radius: 1rem;
  background-color: var(--neutral-300);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  padding: 0.2rem;
}

.toggle-switch:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--red-500);
  background-color: var(--neutral-200);
}

.switch-ball {
  height: 0.75rem;
  width: 0.75rem;
  border-radius: 50%;
  background-color: var(--neutral-0);
  transition: transform 0.3s ease;
  transform: translateX(0);
}

/* Active state modifies only what's necessary */
.toggle-switch.active {
  background-color: var(--red-400);
}

.toggle-switch.active .switch-ball {
  transform: translateX(0.85rem);
}

.filter-btn.active {
  color: var(--neutral-0);
  background-color: var(--red-700);
}

.extensions-container {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.extension-card {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 0.75rem;
  padding: 0.75rem;
  background-color: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  transition: background-color 0.3s ease;
}

/* Dark Mode */

body.dark-mode .extension-card {
  background-color: var(--neutral-800);
  border: 1px solid var(--neutral-700);
}

body.dark-mode .extension-card p {
  color: var(--neutral-300);
}

.extension-card_body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

article {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.extension-card_body img {
  width: 50px;
  height: auto;
}

.text h2 {
  margin: 0;
  font-size: 1.125rem;
}

.text p {
  margin-top: 0.25rem;
  color: var(--neutral-600);
}

.extension-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
}

.active-extension-btn {
  background-color: var(--red-400);
  color: var(--neutral-0);
}

footer {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
footer a {
  color: var(--neutral-900);
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

@media screen and (max-width: 768px) {
  body {
    margin: 1rem;
  }

  .extensions-container {
    grid-template-columns: repeat(1, 1fr);
  }

  header nav {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
  }
}