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

@layer base {
  :root {
    --tg-theme-bg-color: #1a1a2e;
    --tg-theme-text-color: #ffffff;
    --tg-theme-hint-color: #8b9bb4;
    --tg-theme-link-color: #2481cc;
    --tg-theme-button-color: #2481cc;
    --tg-theme-button-text-color: #ffffff;
    --tg-theme-secondary-bg-color: #242442;
  }

  * {
    @apply border-crypto-border;
    -webkit-tap-highlight-color: transparent;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-crypto-dark text-white antialiased;
    font-family: 'Inter', system-ui, sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
  }

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

  ::-webkit-scrollbar-track {
    @apply bg-crypto-darker;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-crypto-border rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-crypto-hint;
  }
}

@layer components {
  .card {
    @apply bg-crypto-card rounded-2xl border border-crypto-border p-4;
  }

  .card-hover {
    @apply transition-all duration-200 hover:border-crypto-purple/50 hover:shadow-lg hover:shadow-crypto-purple/10;
  }

  .btn {
    @apply inline-flex items-center justify-center px-4 py-2.5 rounded-xl font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-primary {
    @apply btn bg-crypto-blue text-white hover:bg-crypto-blue/90 active:scale-95;
  }

  .btn-secondary {
    @apply btn bg-crypto-secondary text-white hover:bg-crypto-secondary/80 active:scale-95;
  }

  .btn-success {
    @apply btn bg-crypto-green text-crypto-dark hover:bg-crypto-green/90 active:scale-95 font-semibold;
  }

  .btn-danger {
    @apply btn bg-crypto-red text-white hover:bg-crypto-red/90 active:scale-95;
  }

  .btn-ghost {
    @apply btn text-crypto-hint hover:text-white hover:bg-white/5;
  }

  .input {
    @apply w-full bg-crypto-darker border border-crypto-border rounded-xl px-4 py-3 text-white placeholder-crypto-hint focus:outline-none focus:border-crypto-blue focus:ring-1 focus:ring-crypto-blue/50 transition-all;
  }

  .badge {
    @apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium;
  }

  .badge-success {
    @apply badge bg-crypto-green/20 text-crypto-green;
  }

  .badge-warning {
    @apply badge bg-yellow-500/20 text-yellow-400;
  }

  .badge-danger {
    @apply badge bg-crypto-red/20 text-crypto-red;
  }

  .skeleton {
    @apply animate-pulse bg-crypto-border rounded;
  }

  .gradient-text {
    @apply bg-gradient-to-r from-crypto-blue to-crypto-purple bg-clip-text text-transparent;
  }

  .glass {
    @apply bg-white/5 backdrop-blur-lg border border-white/10;
  }

  .safe-bottom {
    padding-bottom: max(env(safe-area-inset-bottom), 1rem);
  }

  .telegram-button {
    @apply fixed bottom-0 left-0 right-0 p-4 safe-bottom bg-crypto-dark/95 backdrop-blur-lg border-t border-crypto-border;
  }
}

@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;
  }
}

/* TradingView-like chart styling */
.tv-chart {
  background: #16162a;
}

/* Custom animations */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}

/* Number formatting */
.number-mono {
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', monospace;
}