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

:root {
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(20, 14.3%, 4.1%);
  --muted: hsl(60, 4.8%, 95.9%);
  --muted-foreground: hsl(25, 5.3%, 44.7%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(20, 14.3%, 4.1%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(20, 14.3%, 4.1%);
  --border: hsl(20, 5.9%, 90%);
  --input: hsl(20, 5.9%, 90%);
  --primary: hsl(220, 100%, 50%); /* Logo blue as primary */
  --primary-foreground: hsl(211, 100%, 99%);
  --secondary: hsl(60, 4.8%, 95.9%);
  --secondary-foreground: hsl(24, 9.8%, 10%);
  --accent: hsl(60, 4.8%, 95.9%);
  --accent-foreground: hsl(24, 9.8%, 10%);
  --destructive: hsl(0, 84.2%, 60.2%);
  --destructive-foreground: hsl(60, 9.1%, 97.8%);
  --ring: hsl(20, 14.3%, 4.1%);
  --radius: 0.5rem;
  
  /* WowChat Brand Colors */
  --[#0c68e9]: hsl(220, 100%, 50%); /* Logo blue #0066ff */
  --brand-orange: hsl(14, 100%, 60%); /* Secondary/accent color */
  --brand-dark: hsl(219, 15%, 19%);
  --brand-gray: hsl(218, 8%, 43%);
  --brand-light: hsl(220, 14%, 96%);
}

.dark {
  --background: hsl(240, 10%, 3.9%);
  --foreground: hsl(0, 0%, 98%);
  --muted: hsl(240, 3.7%, 15.9%);
  --muted-foreground: hsl(240, 5%, 64.9%);
  --popover: hsl(240, 10%, 3.9%);
  --popover-foreground: hsl(0, 0%, 98%);
  --card: hsl(240, 10%, 3.9%);
  --card-foreground: hsl(0, 0%, 98%);
  --border: hsl(240, 3.7%, 15.9%);
  --input: hsl(240, 3.7%, 15.9%);
  --primary: hsl(220, 100%, 50%); /* Logo blue as primary */
  --primary-foreground: hsl(211, 100%, 99%);
  --secondary: hsl(240, 3.7%, 15.9%);
  --secondary-foreground: hsl(0, 0%, 98%);
  --accent: hsl(240, 3.7%, 15.9%);
  --accent-foreground: hsl(0, 0%, 98%);
  --destructive: hsl(0, 62.8%, 30.6%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --ring: hsl(240, 4.9%, 83.9%);
  --radius: 0.5rem;
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background font-sans text-foreground antialiased;
    font-family: 'Inter', sans-serif;
  }
}

/* Custom animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}


/* Brand color utilities */
.text-[#0c68e9] {
  color: hsl(220, 100%, 50%); /* Logo blue primary */
}

.text-brand-orange {
  color: hsl(14, 100%, 60%); /* Secondary/accent */
}

.text-brand-dark {
  color: hsl(219, 15%, 19%);
}

.text-brand-gray {
  color: hsl(218, 8%, 43%);
}

.bg-[#0c68e9] {
  background-color: hsl(220, 100%, 50%); /* Logo blue primary */
}

.bg-brand-orange {
  background-color: hsl(14, 100%, 60%); /* Secondary/accent */
}

.bg-brand-dark {
  background-color: hsl(219, 15%, 19%);
}

.bg-brand-light {
  background-color: hsl(220, 14%, 96%);
}

.border-[#0c68e9] {
  border-color: hsl(220, 100%, 50%); /* Logo blue primary */
}

.border-brand-orange {
  border-color: hsl(14, 100%, 60%); /* Secondary/accent */
}

.hover\:bg-[#0c68e9]:hover {
  background-color: hsl(220, 85%, 45%); /* Darker blue on hover */
}

.hover\:bg-brand-orange:hover {
  background-color: hsl(14, 85%, 55%);
}

.hover\:text-[#0c68e9]:hover {
  color: hsl(220, 100%, 50%);
}

.hover\:text-brand-orange:hover {
  color: hsl(14, 100%, 60%);
}