index.css

@import "tailwindcss";

@theme {
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --color-background: #000000;
  --color-surface: #1c1c1e;
  --color-surfaceHighlight: #2c2c2e;
  --color-primary: #ffffff;
  --color-secondary: #a1a1aa;
  --color-accent: #6366f1;

  --gradient-glossy-gradient: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
  --gradient-spotlight: radial-gradient(circle at 50% 0%, rgba(100,100,100,0.15) 0%, transparent 70%);

  --shadow-glass: 0 4px 30px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 20px rgba(255, 255, 255, 0.1);

  --animate-float: float 6s ease-in-out infinite;
  --animate-fade-in: fade-in 0.3s ease-out forwards;
  --animate-slide-up: slide-up 0.3s ease-out forwards;
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}