@import "tailwindcss";
@config "./tailwind.config.js";

@theme {
  --color-oxy-teal: #0d9488;
  --color-oxy-dark-teal: #0f766e;
  --color-oxy-light-teal: #2dd4bf;
  --color-oxy-orange: #f97316;
  --color-oxy-light-orange: #fb923c;
  --color-oxy-dark: #121212;
  --color-oxy-card: #1e1e1e;

  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
  }
  @keyframes slide-up {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0); }
  }

  --animate-float: float 6s ease-in-out infinite;
  --animate-pulse-slow: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-shake: shake 0.3s ease-in-out;
  --animate-slide-up: slide-up 0.4s ease-out;
}

:root {
  --oxy-teal: #0d9488;
  --oxy-dark-teal: #0f766e;
  --oxy-orange: #f97316;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #f8fafc;
}

.dark body {
  background-color: #121212;
}

/* Custom styles for glass panels */
.glass-panel {
  @apply bg-white border-2 border-slate-300 shadow-lg dark:bg-slate-900/95 dark:border-white/10 dark:shadow-2xl;
}

/* Hide scrollbar but allow scrolling */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}