:root {
  --theme-50: #54a7dc1c;
  --theme-100: #e0f2fe;
  --theme-200: #bae6fd;
  --theme-300: #7dd3fc;
  --theme-400: #38bdf8;
  --theme-500: #54a7dc;
  --theme-600: #54a7dc;
  --theme-700: #0369a1;
  --theme-800: #075985;
  --theme-900: #0c4a6e;
  --theme-950: #082f49;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #cbd5e1;
}
/* Firefox compatibility */
* {
  scrollbar-width: thin;
  scrollbar-color: #e2e8f0 transparent;
}

/* Logo animation */
.loader-container {
  position: absolute;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.2s ease-in-out;
}
.logo-icon-img {
  transition: opacity 0.2s ease-in-out;
}
.logo-block:hover .loader-container {
  opacity: 1;
}
.logo-block:hover .logo-icon-img {
  opacity: 0;
}
.sheets-logo {
  width: 32px;
  height: 32px;
  background: #53A7DB;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sheet-grid {
  width: 64%;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14%;
}
.sheet-grid span {
  border-radius: 2px;
  background: #fff;
  opacity: .3;
  transform: scale(.9);
  animation: wave-pulse 1.5s infinite ease-in-out;
}
.sheet-grid span:nth-child(-n+3) {
  background: #F7941D;
}
@keyframes wave-pulse {
  0%, 100% { opacity: .3; transform: scale(.9); }
  30% { opacity: 1; transform: scale(1.1); }
  60% { opacity: .3; transform: scale(.9); }
}
.sheet-grid span:nth-child(1) { animation-delay: 0s; }
.sheet-grid span:nth-child(2) { animation-delay: .1s; }
.sheet-grid span:nth-child(3) { animation-delay: .2s; }
.sheet-grid span:nth-child(4) { animation-delay: .3s; }
.sheet-grid span:nth-child(5) { animation-delay: .4s; }
.sheet-grid span:nth-child(6) { animation-delay: .5s; }
.sheet-grid span:nth-child(7) { animation-delay: .6s; }
.sheet-grid span:nth-child(8) { animation-delay: .7s; }
.sheet-grid span:nth-child(9) { animation-delay: .8s; }