@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

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

@layer base {
  :root {
    --background: 0 0 0;
    --background-secondary: 0 0 0;
    --background-tertiary: 0 0 0;
    --surface: 0 0 0;
    --surface-secondary: 10 10 10;
    --surface-tertiary: 17 17 17;
    --border: 26 26 26;
    --border-secondary: 42 42 42;
    --text-primary: 255 255 255;
    --text-secondary: 161 161 170;
    --text-muted: 113 113 122;
    --primary: 99 102 241;
    --primary-hover: 79 70 229;
    --secondary: 16 185 129;
    --accent: 245 158 11;
    --destructive: 239 68 68;
    --success: 34 197 94;
    --warning: 251 191 36;
  }

  * {
    box-sizing: border-box;
  }

  html {
    @apply h-full;
  }

  body {
    @apply h-full bg-black text-white font-sans antialiased text-sm leading-snug;
    font-family:
      'Inter',
      system-ui,
      -apple-system,
      sans-serif;
  }

  #root {
    @apply h-full;
  }
}

@layer components {
  /* Global dark-themed scrollbars with better contrast */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgb(115 115 115) rgb(40 40 40);
  }

  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  *::-webkit-scrollbar-track {
    background: rgb(40 40 40);
    border-radius: 5px;
  }

  *::-webkit-scrollbar-thumb {
    background-color: rgb(115 115 115);
    border-radius: 5px;
    border: 2px solid rgb(40 40 40);
    transition: background-color 0.2s ease;
  }

  *::-webkit-scrollbar-thumb:hover {
    background-color: rgb(140 140 140);
  }

  *::-webkit-scrollbar-thumb:active {
    background-color: rgb(160 160 160);
  }

  *::-webkit-scrollbar-corner {
    background: rgb(40 40 40);
  }

  /* Trading specific styles */
  .profit {
    @apply text-success;
  }

  .loss {
    @apply text-danger;
  }

  .neutral {
    @apply text-text-secondary;
  }

  /* Compact component utilities */
  .compact-card {
    @apply bg-surface-secondary p-3 rounded border border-border text-sm;
  }

  .compact-button {
    @apply px-2 py-1 text-sm rounded border border-border bg-surface hover:bg-surface-secondary transition-colors;
  }

  .compact-input {
    @apply px-2 py-1 text-sm rounded border border-border bg-surface focus:ring-1 focus:ring-primary-500 focus:border-primary-500;
  }

  .compact-nav-item {
    @apply group flex gap-x-2 rounded-md px-2 py-1.5 text-sm leading-tight font-medium transition-colors;
  }
}

.sticky {
  position: sticky !important;
  position: -webkit-sticky !important;
  z-index: 2;
}

.row,
.sticky {
  display: flex;
  align-items: center;
  background-color: white;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}