:root {
  /* Light theme (default) */
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  
  --primary: 155 60% 40%;
  --primary-foreground: 210 40% 98%;
  
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  
  --accent: 205 100% 45%;
  --accent-foreground: 210 40% 98%;
  
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 155 60% 40%;
  
  --radius: 0.75rem;
}

.dark {
  /* Dark theme */
  --background: 220 15% 6%;
  --foreground: 210 20% 95%;
  
  --card: 220 15% 8%;
  --card-foreground: 210 20% 95%;
  
  --popover: 220 15% 10%;
  --popover-foreground: 210 20% 95%;
  
  --primary: 155 60% 50%;
  --primary-foreground: 220 15% 6%;
  
  --secondary: 220 15% 12%;
  --secondary-foreground: 210 20% 95%;
  
  --muted: 220 15% 10%;
  --muted-foreground: 210 10% 60%;
  
  --accent: 205 100% 50%;
  --accent-foreground: 220 15% 6%;
  
  --destructive: 0 72% 51%;
  --destructive-foreground: 210 20% 95%;
  
  --border: 220 15% 15%;
  --input: 220 15% 12%;
  --ring: 155 60% 50%;
}

* {
  border-color: hsl(var(--border));
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', system-ui, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Custom transitions and interactive styles */
button, a, input, select {
  transition: all 0.2s ease-in-out;
}

button:hover, a.bg-primary:hover, a.hover\:text-foreground:hover {
  transform: translateY(-1px);
}

button:active, a.bg-primary:active, a.hover\:text-foreground:active {
  transform: translateY(0);
}

input:focus, select:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
}

tbody tr {
  transition: background-color 0.15s ease-in-out;
}

th a span {
    display: inline-block;
    transition: transform 0.2s ease;
}

th a:hover span {
    transform: scale(1.2);
}

/* Animated Theme Toggle */
#theme-toggle-checkbox {
  display: none;
}
.toggle {
  height: 40px;
  width: 100px;
  border-radius: 9999px;
  background: linear-gradient(to bottom, #6ec8ff, #1f73a7);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 3px 3px 5px #0000003d;
  transform: scale(0.7);
}
.mountains {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 3;
  background-color: #1d7371;
  transition: all 0.5s ease-in-out;
  clip-path: polygon(
    0% 80%,
    25% 50%,
    40% 70%,
    60% 35%,
    65% 45%,
    80% 20%,
    100% 80%,
    100% 100%,
    0% 100%
  );
}
.cloud {
  height: 8px;
  width: 18px;
  border-radius: 9999px;
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: 20%;
  left: 10%;
  filter: opacity(0.5);
}
.sea {
  height: 200px;
  width: 300%;
  border-radius: 50%;
  position: absolute;
  right: 50%;
  bottom: -500%;
  transform: translateX(50%);
  transition: all 0.5s ease-in-out;
  background: linear-gradient(
    to bottom,
    #3f75cc,
    #06063b,
    #06063b,
    #06063b,
    #06063b
  );
}
.sea::before {
  content: "";
  height: 25px;
  width: 15px;
  background-color: rgba(254, 254, 254, 0.34);
  filter: blur(5px);
  position: absolute;
  top: 2%;
  left: 43%;
}
.star {
  height: 2px;
  width: 2px;
  position: absolute;
  top: -50%;
  right: 15%;
  background-color: #fff;
  transition: all 0.5s ease-in-out;
  filter: blur(0.8px);
  border-radius: 50%;
}
.star::before {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: -50%;
  right: 20px;
  background-color: #fff;
  transition: all 0.5s ease-in-out;
  border-radius: 50%;
}
.star::after {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 10px;
  right: -20px;
  background-color: #fff;
  transition: all 0.5s ease-in-out;
  border-radius: 50%;
}
.cloud::before {
  content: "";
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: -50%;
  right: 50%;
  transform: translateX(50%);
}

#theme-toggle-checkbox:checked + .toggle {
  background: linear-gradient(to bottom, #036daf, #003d63);
}

.toggle::before {
  content: "";
  height: 20px;
  width: 20px;
  position: absolute;
  top: 10%;
  right: 15%;
  border-radius: 50%;
  background-color: #ffd34d;
  transition: all 0.5s ease-in-out;
  box-shadow: 0 0 15px #fef95fc3;
}
.toggle::after {
  content: "";
  height: 18px;
  width: 18px;
  position: absolute;
  top: 10%;
  left: -30%;
  border-radius: 50%;
  background-color: #ffffff;
  transition: all 0.5s ease-in-out;
  box-shadow: 0 0 10px #ffffff88;
}
#theme-toggle-checkbox:checked + .toggle::before {
  transform: translateX(180%);
}
#theme-toggle-checkbox:checked + .toggle::after {
  transform: translateX(450%);
}
#theme-toggle-checkbox:checked + .toggle .mountains {
  background-color: #05021a;
  transform: translateY(100%);
}
#theme-toggle-checkbox:checked + .toggle .sea {
  background-color: #05021a;
  bottom: -210%;
}
#theme-toggle-checkbox:checked + .toggle .star {
  transform: rotate(10deg);
  top: 20%;
}