client/src/index.css

@import "tailwindcss";

@theme {
  --color-glass-dark: rgba(255, 255, 255, 0.05);
  --color-glass-border: rgba(255, 255, 255, 0.1);
  --color-accent: #3b82f6; /* Beautiful dynamic blue */
}

@layer base {
  body {
    @apply bg-neutral-950 text-neutral-100 antialiased font-sans;
  }
  
  /* Hide native browser date picker icon */
  input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
  }
}

.glass-panel {
  @apply bg-glass-dark backdrop-blur-md border border-glass-border shadow-xl rounded-2xl transition-all duration-300;
}

.glass-panel:hover {
  @apply border-white/20 shadow-2xl shadow-blue-500/10;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.5s ease-out forwards;
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }