client/src/index.css

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

@layer base {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    background-color: #0A0A0A;
    color: #F5F5F5;
    font-family: 'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }

  ::selection {
    background-color: rgba(212, 175, 55, 0.3);
    color: #F5F5F5;
  }

  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-track {
    background: #111111;
  }

  ::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 3px;
  }

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

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
  }

  a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center px-8 py-3 
           bg-gold-500 text-dark-900 font-body font-semibold 
           rounded-lg transition-all duration-300 ease-out
           hover:bg-gold-400 hover:shadow-gold-lg hover:-translate-y-0.5
           active:translate-y-0 active:shadow-gold
           disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center px-8 py-3 
           border border-gold-500/40 text-gold-500 font-body font-medium 
           rounded-lg transition-all duration-300 ease-out
           hover:border-gold-500 hover:bg-gold-500/10 hover:shadow-gold
           active:bg-gold-500/20;
  }

  .btn-ghost {
    @apply inline-flex items-center justify-center px-6 py-2 
           text-light-400 font-body font-medium 
           rounded-lg transition-all duration-300 ease-out
           hover:text-gold-500 hover:bg-dark-500/50;
  }

  .card {
    @apply bg-card-gradient backdrop-blur-sm border border-dark-400/30 
           rounded-2xl p-6 transition-all duration-500 ease-out
           hover:border-gold-500/20 hover:shadow-card-hover hover:-translate-y-1;
  }

  .card-static {
    @apply bg-card-gradient backdrop-blur-sm border border-dark-400/30 
           rounded-2xl p-6;
  }

  .input-field {
    @apply w-full px-4 py-3 bg-dark-600 border border-dark-400/50 
           rounded-lg text-light-300 font-body placeholder-light-500/40
           transition-all duration-300 ease-out
           focus:outline-none focus:border-gold-500/60 focus:shadow-gold
           hover:border-dark-300;
  }

  .section-heading {
    @apply font-display text-4xl md:text-5xl font-bold text-light-100 mb-4;
  }

  .section-subheading {
    @apply font-body text-lg text-light-500 max-w-2xl mx-auto;
  }

  .gold-text {
    @apply text-transparent bg-clip-text bg-gold-gradient;
  }

  .glass-panel {
    @apply bg-dark-700/60 backdrop-blur-xl border border-dark-400/20 
           rounded-2xl shadow-card;
  }

  .terminal-bg {
    @apply bg-dark-900 border border-dark-400/30 rounded-xl 
           font-mono text-sm;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .animate-delay-100 {
    animation-delay: 100ms;
  }

  .animate-delay-200 {
    animation-delay: 200ms;
  }

  .animate-delay-300 {
    animation-delay: 300ms;
  }

  .animate-delay-400 {
    animation-delay: 400ms;
  }

  .animate-delay-500 {
    animation-delay: 500ms;
  }
}