@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 220 20% 6%;
    --foreground: 0 0% 98%;

    --card: 220 20% 10%;
    --card-foreground: 0 0% 98%;

    --popover: 220 20% 10%;
    --popover-foreground: 0 0% 98%;

    --primary: 24 100% 55%;
    --primary-foreground: 0 0% 100%;

    --secondary: 220 20% 14%;
    --secondary-foreground: 0 0% 98%;

    --muted: 220 15% 18%;
    --muted-foreground: 220 10% 60%;

    --accent: 350 80% 55%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 220 15% 20%;
    --input: 220 15% 20%;
    --ring: 24 100% 55%;

    --radius: 0.75rem;

    /* Custom tokens */
    --flame-orange: 24 100% 55%;
    --flame-red: 10 90% 50%;
    --mattel-red: 350 80% 55%;
    --hot-wheels-blue: 200 90% 50%;
    --neon-glow: 24 100% 60%;
    
    /* Gradients */
    --gradient-flame: linear-gradient(135deg, hsl(24 100% 55%) 0%, hsl(10 90% 50%) 50%, hsl(350 80% 55%) 100%);
    --gradient-dark: linear-gradient(180deg, hsl(220 20% 8%) 0%, hsl(220 20% 4%) 100%);
    --gradient-card: linear-gradient(145deg, hsl(220 20% 12%) 0%, hsl(220 20% 8%) 100%);
    --gradient-glass: linear-gradient(145deg, hsla(0 0% 100% / 0.05) 0%, hsla(0 0% 100% / 0.02) 100%);
    
    /* Shadows */
    --shadow-glow: 0 0 60px hsla(24 100% 55% / 0.3);
    --shadow-card: 0 20px 40px hsla(0 0% 0% / 0.4);
    --shadow-elevated: 0 8px 32px hsla(0 0% 0% / 0.5);
  }

  .dark {
    --background: 220 20% 6%;
    --foreground: 0 0% 98%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: 'Inter', sans-serif;
  }

  h1, h2, h3, .font-display {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.02em;
  }
}

@layer utilities {
  .text-gradient-flame {
    background: var(--gradient-flame);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .bg-gradient-flame {
    background: var(--gradient-flame);
  }
  
  .bg-gradient-dark {
    background: var(--gradient-dark);
  }
  
  .bg-gradient-card {
    background: var(--gradient-card);
  }
  
  .glass {
    background: var(--gradient-glass);
    backdrop-filter: blur(20px);
    border: 1px solid hsla(0 0% 100% / 0.1);
  }
  
  .glow-flame {
    box-shadow: var(--shadow-glow);
  }
  
  .shadow-card {
    box-shadow: var(--shadow-card);
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  
  .animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
  }
  
  .animate-slide-up {
    animation: slide-up 0.8s ease-out forwards;
  }
  
  .animate-fade-in {
    animation: fade-in 1s ease-out forwards;
  }

  .animate-marquee {
    animation: marquee 20s linear infinite;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; box-shadow: 0 0 40px hsla(24 100% 55% / 0.4); }
  50% { opacity: 0.8; box-shadow: 0 0 80px hsla(24 100% 55% / 0.6); }
}

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

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}