@import "tailwindcss";

@layer theme {
  :root {
    --color-blue-50: oklch(97% 0.01 160);
    --color-blue-100: oklch(92% 0.02 160);
    --color-blue-200: oklch(86% 0.04 160);
    --color-blue-300: oklch(78% 0.07 160);
    --color-blue-400: oklch(70% 0.10 160);
    --color-blue-500: #064e3b; /* your main color */
    --color-blue-600: oklch(55% 0.14 160);
    --color-blue-700: oklch(48% 0.13 160);
    --color-blue-800: oklch(42% 0.11 160);
    --color-blue-900: oklch(36% 0.08 160);
  }
}


.loader {
  display: inline-flex;
  justify-content: center; /* center dots horizontally */
  align-items: center;     /* center vertically */
  width: 100%;             /* take full button width */
  height: 100%;            /* match button height */
  gap: 8px;                /* space between dots */
}

.loader .dot {
  width: 12px;             /* bigger dot */
  height: 12px;            /* bigger dot */
  background-color: white;
  border-radius: 50%;
  animation: bounce 0.6s infinite alternate;
}

.loader .dot:nth-child(2) { animation-delay: 0.2s; }
.loader .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); } /* taller bounce for bigger dots */
}

.hidden {
  display: none;
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.animate-pulse {
  animation: pulse 1.5s ease-in-out infinite;
}