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

@layer base {
  :root {
    --background: 222 47% 11%;
    --foreground: 0 0% 98%;

    --card: 222 47% 11%;
    --card-foreground: 0 0% 98%;

    --popover: 222 47% 11%;
    --popover-foreground: 0 0% 98%;

    --primary: 24 100% 50%;
    --primary-foreground: 0 0% 98%;

    --secondary: 217 32% 18%;
    --secondary-foreground: 0 0% 98%;

    --muted: 217 32% 18%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217 32% 18%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 217 32% 18%;
    --input: 217 32% 18%;
    --ring: 24 100% 50%;

    --radius: 0.5rem;
  }

  * {
    @apply border-border;
  }

  html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }

  body {
    @apply bg-netbirdDark text-foreground;
  }

  /* Custom Scrollbar Styling */
  ::-webkit-scrollbar {
    width: 12px;
  }

  ::-webkit-scrollbar-track {
    background-color: #0f1729; /* netbirdDark */
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #ff6b00; /* netbirdOrange */
    border-radius: 10px;
    border: 2px solid #0f1729; /* Border to match track */
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #ff8833; /* Lighter shade on hover */
  }

  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #ff6b00 #0f1729;
  }
}

.gradient-text {
  background: linear-gradient(90deg, #ff6b00, #ff9d57);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.data-flow-animation {
  position: relative;
  overflow: hidden;
}

.data-flow-animation::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 107, 0, 0.2),
    transparent
  );
  animation: data-flow 3s infinite;
}

@keyframes data-flow {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Import animations */
@import './animations.css';