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

:root {
  --background: #000000;
  --foreground: #ffffff;
  --primary: #ff6b35;
  --primary-foreground: #000000;
  --secondary: #1a1a1a;
  --secondary-foreground: #ffffff;
  --muted: #0f0f0f;
  --muted-foreground: #a3a3a3;
  --accent: #ff6b35;
  --accent-foreground: #000000;
  --border: #333333;
  --input: #333333;
  --ring: #ff6b35;
  --radius: 0.75rem;
}

* {
  border-color: hsl(var(--border));
}

body {
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@layer base {
  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
  }
  
  h1 {
    font-size: 3.5rem;
    font-weight: 700;
  }
  
  h2 {
    font-size: 2.5rem;
  }
  
  h3 {
    font-size: 1.875rem;
  }
}

@layer components {
  .btn-primary {
    @apply bg-orange-500 hover:bg-orange-600 text-black font-semibold py-3 px-6 rounded-lg transition-colors duration-200 shadow-lg hover:shadow-xl;
  }
  
  .btn-secondary {
    @apply bg-gray-800 hover:bg-gray-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200 border border-gray-600;
  }
  
  .card {
    @apply bg-gray-900 rounded-xl shadow-lg border border-gray-700 p-6;
  }
  
  .gradient-bg {
    @apply bg-gradient-to-br from-gray-900 to-black;
  }
  
  .text-gradient {
    @apply bg-gradient-to-r from-orange-500 to-orange-400 bg-clip-text text-transparent;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .animate-fade-in {
    animation: fadeIn 0.6s ease-out;
  }
  
  .animate-slide-up {
    animation: slideUp 0.8s ease-out;
  }
}

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

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