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

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

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-genesis-dark text-white font-sans antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-display;
  }
}

@layer components {
  /* Navigation */
  .nav-link {
    @apply text-gray-300 hover:text-genesis-gold transition-colors duration-300 font-medium;
  }

  .nav-link.active {
    @apply text-genesis-gold;
  }

  /* Buttons */
  .btn-primary {
    @apply bg-genesis-gold hover:bg-genesis-gold-light text-genesis-dark font-semibold px-6 py-3 rounded-lg transition-all duration-300 hover:scale-105 hover:shadow-lg;
  }

  .btn-secondary {
    @apply bg-genesis-gray hover:bg-genesis-gray-light text-white font-semibold px-6 py-3 rounded-lg transition-all duration-300 border border-genesis-gold/20 hover:border-genesis-gold/50;
  }

  /* Cards */
  .matrix-card {
    @apply bg-genesis-gray border border-genesis-gold/20 rounded-xl p-6 transition-all duration-500 hover:border-genesis-gold hover:shadow-2xl hover:shadow-genesis-gold/20 hover:scale-105 cursor-pointer;
  }

  .matrix-card:hover {
    @apply bg-genesis-gray-light;
  }

  /* Section Containers */
  .section-container {
    @apply max-w-7xl mx-auto px-6 py-20;
  }

  /* Heading Styles */
  .heading-xl {
    @apply text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight;
  }

  .heading-lg {
    @apply text-4xl md:text-5xl font-bold tracking-tight;
  }

  .heading-md {
    @apply text-3xl md:text-4xl font-bold tracking-tight;
  }

  .heading-sm {
    @apply text-2xl md:text-3xl font-bold tracking-tight;
  }

  /* Golden Text */
  .text-gold-gradient {
    @apply bg-gradient-to-r from-genesis-gold via-genesis-gold-light to-genesis-gold bg-clip-text text-transparent;
  }

  /* Glow Effects */
  .glow-gold {
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
  }

  .glow-gold-intense {
    box-shadow: 0 0 50px rgba(212, 175, 55, 0.5);
  }

  /* Dividers */
  .gold-divider {
    @apply h-px bg-gradient-to-r from-transparent via-genesis-gold to-transparent my-12;
  }

  /* Badge */
  .badge {
    @apply inline-block bg-genesis-gold/10 text-genesis-gold px-4 py-2 rounded-full text-sm font-semibold border border-genesis-gold/30;
  }

  /* Table Styles */
  .comparison-table {
    @apply w-full border-collapse;
  }

  .comparison-table th {
    @apply bg-genesis-gray text-genesis-gold font-bold p-4 text-left border-b-2 border-genesis-gold;
  }

  .comparison-table td {
    @apply p-4 border-b border-genesis-gold/20;
  }

  .comparison-table tr:hover {
    @apply bg-genesis-gray/50;
  }

  /* Mobile Menu */
  .mobile-menu {
    @apply fixed inset-0 bg-genesis-dark z-50 transform transition-transform duration-300;
  }

  .mobile-menu.closed {
    @apply translate-x-full;
  }

  .mobile-menu.open {
    @apply translate-x-0;
  }
}

@layer utilities {
  /* Animations */
  .animate-on-scroll {
    @apply opacity-0 translate-y-8;
  }

  .animate-on-scroll.visible {
    @apply opacity-100 translate-y-0 transition-all duration-800;
  }

  /* Gradient Backgrounds */
  .bg-gradient-dark {
    background: radial-gradient(circle at top right, #1a1a1a 0%, #0a0a0a 50%, #000000 100%);
  }

  .bg-gradient-gold {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0) 100%);
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
  background: #d4af37;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #f0d97a;
}

/* Selection */
::selection {
  background: rgba(212, 175, 55, 0.3);
  color: #ffffff;
}

/* Focus Styles */
*:focus-visible {
  outline: 2px solid #d4af37;
  outline-offset: 4px;
}