@import "fonts";

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

@layer base {
  html {
    @apply text-white bg-dark-900;
  }

  body {
    @apply font-sans antialiased;
  }

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

@layer components {
  .gold-gradient {
    @apply bg-gradient-to-r from-gold-500 via-gold-600 to-gold-700;
  }

  .gold-text-gradient {
    @apply text-transparent bg-clip-text bg-gradient-to-r from-gold-500 to-gold-600;
  }

  .gold-border {
    @apply border-2 border-gold-500 shadow-gold;
  }

  .gold-input {
    @apply rounded-lg bg-dark-800 border-gold-500 focus:ring-2 focus:ring-gold-500 focus:border-transparent;
  }

  .section-title {
    @apply font-bold tracking-tight text-white text-display;
  }

  .section-subtitle {
    @apply mt-2 text-gray-400 text-subtitle;
  }

  .card {
    @apply p-6 transition-shadow duration-300 rounded-lg bg-dark-800 shadow-dark hover:shadow-gold;
  }

  .btn-primary {
    @apply px-6 py-3 font-bold transition-colors duration-200 rounded-lg bg-gold-500 text-dark-900 hover:bg-gold-600 shadow-gold hover:shadow-gold-strong;
  }

  .btn-secondary {
    @apply px-6 py-3 font-bold transition-colors duration-200 border-2 rounded-lg bg-dark-800 text-gold-500 hover:bg-dark-700 border-gold-500;
  }

  /* Hide scrollbar for mobile tabs */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
  }
}

/* Custom animations */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideIn {
  0% {
    transform: translateX(-20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
} 
@font-face {
  font-family: 'Inter';
  src: url(/assets/inter/Regular.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url(/assets/inter/Italic.ttf) format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Inter';
  src: url(/assets/inter/SemiBold.ttf) format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url(/assets/inter/SemiBoldItalic.ttf) format('truetype');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'Inter';
  src: url(/assets/inter/Bold.ttf) format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url(/assets/inter/BoldItalic.ttf) format('truetype');
  font-weight: 700;
  font-style: italic;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */