@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: "Inter", sans-serif;
  background-color: #f0f9ff;
}

.gradient-brand {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}

.gradient-sidebar {
  background: linear-gradient(160deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
}

.card-shadow {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.logo-shine {
  position: relative;
  overflow: hidden;
}
.logo-shine::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transform: rotate(45deg);
  animation: shine 3s infinite;
}
@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) rotate(45deg);
  }
}

input[type="range"]::-webkit-slider-runnable-track {
  background: #dbeafe;
  height: 8px;
  border-radius: 4px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  background: #1e40af;
  border-radius: 50%;
  margin-top: -6px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}