@import "tailwindcss";
@import "tw-animate-css";

/* Glassmorphism tokens and utilities */
@layer utilities {
  .glass {
    background-color: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .glass-card {
    border-radius: 22px;
    background-color: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .glass-card:hover {
    border-color: rgba(220, 38, 38, 0.5);
    box-shadow: 0 0 25px rgba(220, 38, 38, 0.35);
    transform: scale(1.03);
  }

  /* Custom Red Dark Scrollbar */
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.5);
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(220, 38, 38, 0.4);
    border-radius: 9999px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(220, 38, 38, 0.8);
  }

  /* Hide scrollbar for clean chip strips */
  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

html,
body {
  background-color: #000000;
  color: #ffffff;
  color-scheme: dark;
}