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

@layer base {
  :root {
    --background: 222 47% 11%;
    --foreground: 210 40% 98%;
    
    --card: 222 47% 13%;
    --card-foreground: 210 40% 98%;
    
    --popover: 222 47% 11%;
    --popover-foreground: 210 40% 98%;
    
    --primary: 210 100% 50%;
    --primary-foreground: 210 40% 98%;
    
    --secondary: 217 33% 17%;
    --secondary-foreground: 210 40% 98%;
    
    --muted: 217 33% 17%;
    --muted-foreground: 215 20% 65%;
    
    --accent: 217 33% 17%;
    --accent-foreground: 210 40% 98%;
    
    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;
    
    --success: 142 76% 36%;
    --success-foreground: 210 40% 98%;
    
    --border: 217 33% 17%;
    --input: 217 33% 17%;
    --ring: 224 71% 45%;
    
    --radius: 0.5rem;
  }

  .glass-card h4, .glass-card h5 {
    margin-top: 0 !important;
    margin-bottom: 0.25rem !important; /* tighter bottom spacing */
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}


.gradient-bg {
  background: linear-gradient(135deg, rgba(13, 17, 28, 0.95) 0%, rgba(18, 24, 38, 0.95) 100%);
}

.glass-card {
  background: rgba(30, 41, 59, 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.order-book-row:hover {
  background-color: rgba(59, 130, 246, 0.1);
}

.buy-gradient {
  background: linear-gradient(90deg, rgba(10, 255, 2, 0.048) 0%, transparent 100%);
}

.sell-gradient {
  background: linear-gradient(90deg, rgba(255, 2, 2, 0.082) 0%, transparent 100%);
}

.depth-chart-buy {
  background: linear-gradient(180deg, rgba(106, 253, 21, 0.068) 0%, transparent 100%);
}

.depth-chart-sell {
  background: linear-gradient(180deg, rgba(252, 89, 25, 0.089) 0%, transparent 100%);
}

.pi-gradient {
  background: linear-gradient(90deg, #8A2BE2 0%, #4169E1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.paypal-gradient {
  background: linear-gradient(90deg, #003087 0%, #009cde 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}