/* Variables */
:root {
  --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-400: hsl(3, 86%, 64%);
  --Red-500: hsl(3, 71%, 56%);
  --Red-700: hsl(3, 77%, 44%);
  --Light-Gradient: linear-gradient(180deg, #ebf2fc 0%, #eef8f9 100%);
  --Dark-Gradient: linear-gradient(180deg, #040918 0%, #091540 100%);
}

/* Base Styles */
body {
  background-image: var(--Light-Gradient);
}

body.light-mode {
  color: var(--Neutral-900);
}

/* Header */
.main-header {
  background-color: var(--Neutral-0);
  box-shadow: 2px 2px 2px 2px var(--Neutral-200);
}

/* Theme Toggle */
.theme-toggle {
  background-color: var(--Neutral-100);
}

.theme-toggle:hover {
  background-color: var(--Neutral-300);
  cursor: pointer;
}

.theme-toggle:focus {
  border: 2px solid var(--Red-700);
  background-color: var(--Neutral-100);
  outline: none;
}

/* Filter Section */
.filter-section p {
  color: var(--Neutral-900);
}

/* Buttons */
.btn.active-tab {
  background-color: var(--Red-700) !important;
  color: var(--Neutral-0) !important;
}

.filter-all,
.filter-active,
.filter-inactive {
  background-color: var(--Neutral-0);
  color: var(--Neutral-900);
  border: 1px solid var(--Neutral-200);
}

.filter-all:hover {
  background-color: var(--Red-400) !important;
}

.filter-all:focus {
  border: 1.2px solid var(--Neutral-0);
}

.filter-active:hover,
.filter-inactive:hover {
  background-color: var(--Neutral-0);
  color: var(--Neutral-600);
  cursor: pointer;
}

.filter-active:focus,
.filter-inactive:focus {
  border: 2px solid var(--Red-700);
  outline: none;
  background-color: var(--Neutral-0);
}

/* Cards */
.card {
  background-color: var(--Neutral-0);
  border: 1.2px solid var(--Neutral-200);
  box-shadow: 2px 2px 5px 0px var(--Neutral-200);
}

.card-title {
  color: var(--Neutral-900);
}

.card-description {
  color: var(--Neutral-500);
}

/* Remove Button */
.remove-btn {
  background-color: var(--Neutral-0);
  color: var(--Neutral-900);
  border: 1.2px solid var(--Neutral-300);
}

.remove-btn:hover {
  color: var(--Neutral-0);
  background-color: var(--Red-700);
  border: 1.2px solid var(--Red-500);
}

.remove-btn:focus {
  outline-color: var(--Red-700);
  outline-width: 3px;
  border: 2px solid var(--Neutral-0);
  background-color: var(--Neutral-100);
  color: var(--Neutral-900);
}

/* Toggle Switch */
.toggle-label:focus {
  outline-color: var(--Red-500);
  outline-style: solid;
  outline-width: 3px;
  border: 2px solid var(--Neutral-0);
}

.toggle-label.on:hover {
  background-color: var(--Red-400);
}

.on {
  background-color: var(--Red-700);
}

.off {
  background-color: var(--Neutral-300);
}

input[type="checkbox"]:checked + .on {
  background-color: var(--Red-700);
}

input[type="checkbox"]:checked + .off {
  background-color: var(--Neutral-300);
}