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

@layer base {
  :root {
    --binance-yellow: #F0B90B;
    --binance-gold: #FFD000;
    --binance-light-gold: #F8D12F;
    --binance-active-yellow: #D0980B;
    --binance-dark: #222126;
    --binance-dark-card: #2B2F36;
    --focus-blue: #1EAEDB;
    --surface-white: #FFFFFF;
    --surface-snow: #F5F5F5;
    --text-ink: #1E2026;
    --text-primary: #1E2026;
    --text-secondary: #32313A;
    --text-slate: #848E9C;
    --text-steel: #686A6C;
    --text-muted: #777E90;
    --semantic-green: #0ECB81;
    --semantic-red: #F6465D;
    --border-light: #E6E8EA;
    --border-gold: #FFD000;
    
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 48 96% 53%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.75rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 48 96% 53%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-binance-dark text-white antialiased;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
}

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

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

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

::-webkit-scrollbar-thumb:hover {
  background: #3B3F46;
}

::selection {
  background: rgba(240, 185, 11, 0.3);
  color: white;
}

*:focus-visible {
  outline: 2px solid #1EAEDB;
  outline-offset: 2px;
}

html {
  scroll-behavior: smooth;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.5s ease-out forwards;
}

.font-mono {
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
}

.btn-primary {
  @apply bg-binance-yellow text-text-ink font-semibold rounded-button px-8 py-1.5;
  @apply hover:bg-focus-blue hover:text-white;
  @apply active:bg-binance-activeYellow;
  @apply focus:bg-focus-blue focus:border-black focus:outline-black;
  @apply transition-all duration-200;
}

.btn-pill {
  @apply bg-binance-gold text-white font-semibold rounded-pill px-2.5 py-2.5;
  @apply shadow-pill;
  @apply hover:bg-focus-blue hover:text-white;
  @apply transition-all duration-200;
}

.btn-secondary {
  @apply bg-white text-binance-yellow font-semibold rounded-pill px-2.5 py-2.5;
  @apply border border-binance-yellow;
  @apply shadow-pill;
  @apply hover:bg-focus-blue hover:text-white hover:border-focus-blue;
  @apply transition-all duration-200;
}

.card-light {
  @apply bg-white border border-binanceBorder-light rounded-card;
  @apply shadow-card hover:shadow-card-hover;
  @apply transition-all duration-200;
}

.card-dark {
  @apply bg-binance-darkCard rounded-card;
  @apply hover:shadow-card-hover;
  @apply transition-all duration-200;
}

.input-field {
  @apply bg-surface-snow;
  @apply text-text-ink border border-binanceBorder-light rounded-data;
  @apply px-3 py-0;
  @apply focus:border-black focus:outline-1;
  @apply placeholder:text-text-slate;
  @apply transition-all duration-200;
}

.nav-link {
  @apply text-text-secondary font-semibold text-caption;
  @apply hover:text-text-hoverDark;
  @apply transition-all duration-200;
}

.price-up {
  @apply text-semantic-green;
}

.price-down {
  @apply text-semantic-red;
}