@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;500;600&family=Outfit:wght@500;600;700;800&display=swap');

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

:root {
  /* Premium Dark Theme by default */
  --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: 262 83% 58%;
  --primary-foreground: 210 40% 98%;

  --secondary: 217 33% 17%;
  --secondary-foreground: 210 40% 98%;

  --muted: 217 33% 17%;
  --muted-foreground: 215 20% 65%;

  --accent: 262 83% 58%;
  --accent-foreground: 210 40% 98%;

  --destructive: 0 62% 30%;
  --destructive-foreground: 210 40% 98%;

  --border: 217 33% 17%;
  --input: 217 33% 17%;
  --ring: 262 83% 58%;

  --font-body: 'DM Sans', sans-serif;
  --font-display: 'Outfit', sans-serif;
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground antialiased;
    font-family: var(--font-body);
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
  }
}

@layer utilities {
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary via-purple-400 to-pink-500;
  }
  
  .glass-panel {
    @apply bg-background/80 backdrop-blur-md border border-white/10 shadow-xl;
  }
  
  /* Co-browsing highlighter animation */
  .ai-highlight {
    @apply relative z-50;
    animation: highlight-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    outline: 2px solid hsl(var(--primary));
    box-shadow: 0 0 20px -5px hsl(var(--primary) / 0.5);
    background-color: hsl(var(--primary) / 0.1);
    border-radius: 4px;
    transition: all 0.3s ease;
  }
}

@keyframes highlight-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--muted));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground));
}
