@import url('https://api.fontshare.com/v2/css?f[]=satoshi@700,500,400&display=swap');

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

@layer base {
  html {
    -webkit-tap-highlight-color: transparent;
  }
  
  body {
    @apply bg-surface-50 text-gray-900 antialiased;
    @apply dark:bg-gray-950 dark:text-gray-100;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    transition: background-color 0.3s ease, color 0.3s ease;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-5 py-3 rounded-2xl font-semibold transition-all duration-300;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    @apply active:scale-95;
  }
  
  .btn-primary {
    @apply bg-gradient-to-r from-primary-600 to-primary-700 text-white;
    @apply hover:from-primary-700 hover:to-primary-800;
    @apply focus:ring-primary-500;
    @apply shadow-lg shadow-primary-500/25;
    @apply dark:from-primary-500 dark:to-primary-600;
    @apply dark:hover:from-primary-600 dark:hover:to-primary-700;
  }
  
  .btn-secondary {
    @apply bg-white text-gray-700 border border-gray-200;
    @apply hover:bg-gray-50 hover:border-gray-300;
    @apply focus:ring-gray-500;
    @apply dark:bg-gray-800 dark:text-gray-200 dark:border-gray-700;
    @apply dark:hover:bg-gray-700 dark:hover:border-gray-600;
  }
  
  .btn-accent {
    @apply bg-gradient-to-r from-accent-400 to-accent-500 text-white;
    @apply hover:from-accent-500 hover:to-accent-600;
    @apply focus:ring-accent-400;
    @apply shadow-lg shadow-accent-400/25;
  }
  
  .input {
    @apply w-full px-4 py-3.5 rounded-2xl border border-gray-200 bg-white;
    @apply focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500;
    @apply placeholder:text-gray-400 transition-all duration-200;
    @apply dark:bg-gray-900 dark:border-gray-700 dark:text-gray-100;
    @apply dark:placeholder:text-gray-500 dark:focus:border-primary-400;
  }
  
  .card {
    @apply bg-white rounded-3xl shadow-sm border border-gray-100/50;
    @apply hover:shadow-md transition-all duration-300;
    @apply dark:bg-gray-900 dark:border-gray-800 dark:shadow-none;
    @apply dark:hover:bg-gray-800;
  }
  
  .card-glass {
    @apply bg-white/70 backdrop-blur-xl rounded-3xl;
    @apply border border-white/20 shadow-lg;
    @apply dark:bg-gray-900/70 dark:border-gray-700/50;
  }
  
  .gradient-mesh {
    background: 
      radial-gradient(at 40% 20%, rgba(20, 184, 166, 0.1) 0px, transparent 50%),
      radial-gradient(at 80% 0%, rgba(247, 181, 56, 0.08) 0px, transparent 50%),
      radial-gradient(at 0% 50%, rgba(20, 184, 166, 0.05) 0px, transparent 50%);
  }
  
  .dark .gradient-mesh {
    background: 
      radial-gradient(at 40% 20%, rgba(20, 184, 166, 0.15) 0px, transparent 50%),
      radial-gradient(at 80% 0%, rgba(247, 181, 56, 0.1) 0px, transparent 50%),
      radial-gradient(at 0% 50%, rgba(20, 184, 166, 0.08) 0px, transparent 50%);
  }
}

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

::-webkit-scrollbar-track {
  @apply bg-transparent;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-300 rounded-full;
  @apply dark:bg-gray-700;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400;
  @apply dark:bg-gray-600;
}