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

/* ============================================
   PREMIUM DESIGN SYSTEM - CSS VARIABLES
   ============================================ */
:root {
  /* Navy palette */
  --navy-deep: #0a1628;
  --navy-900: #0f172a;
  --navy-800: #13243E;
  --navy-700: #1a2942;
  --navy-600: #2d4a6f;

  /* Lime/Brand colors */
  --lime-400: #c4e538;
  --lime-500: #C0DC2D;
  --lime-glow: rgba(192, 220, 45, 0.3);

  /* Neutral colors */
  --warm-white: #fafaf9;
  --warm-gray-50: #f9fafb;

  /* Glass effects */
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.12);

  /* Light mode specific */
  --bg-primary: #f9fafb;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f3f4f6;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #9ca3af;
  --border-color: #e5e7eb;
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.05);
  --sidebar-bg: #13243E;
  --sidebar-text: #ffffff;

  /* Standardized animation durations */
  --duration-fast: 300ms;
  --duration-medium: 500ms;
  --duration-slow: 800ms;
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);

  /* Pipeline stage colors - Light mode */
  --pipeline-contacted: #a5b4fc;
  --pipeline-discovery: #c4b5fd;
  --pipeline-cart: #f0abfc;
  --pipeline-order: #86efac;
  --pipeline-paid: #bef264;
  --pipeline-delivered: #C0DC2D;
}

/* Dark mode variables */
.dark {
  --bg-primary: #0a1628;
  --bg-secondary: #0f172a;
  --bg-tertiary: #1a2942;
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --text-muted: #9ca3af;
  --border-color: rgba(255, 255, 255, 0.1);
  --card-bg: linear-gradient(135deg, rgba(19, 36, 62, 0.8) 0%, rgba(10, 22, 40, 0.9) 100%);
  --card-border: rgba(192, 220, 45, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.08);
  --sidebar-bg: #0f172a;
  --sidebar-text: #ffffff;

  /* Pipeline stage colors - Dark mode (more vibrant) */
  --pipeline-contacted: #818cf8;
  --pipeline-discovery: #a78bfa;
  --pipeline-cart: #e879f9;
  --pipeline-order: #4ade80;
  --pipeline-paid: #a3e635;
  --pipeline-delivered: #C0DC2D;
}

/* ============================================
   TYPOGRAPHY BASE STYLES
   ============================================ */
body {
  font-family: 'IBM Plex Sans', 'Funnel Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-display {
  font-family: 'Bricolage Grotesque', 'Funnel Display', sans-serif;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* ============================================
   THEME TRANSITIONS
   ============================================ */
html {
  scroll-behavior: smooth;
}

html.transitioning,
html.transitioning *,
html.transitioning *::before,
html.transitioning *::after {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

/* ============================================
   PREMIUM GLASSMORPHISM EFFECTS
   ============================================ */
.glass-effect {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
}

.glass-effect-dark {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(192, 220, 45, 0.1);
}

.glass-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.glass-card-dark {
  background: linear-gradient(135deg, rgba(19, 36, 62, 0.8) 0%, rgba(10, 22, 40, 0.9) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(192, 220, 45, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.glass-input {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s var(--ease-premium);
}

.glass-input:focus,
.glass-input:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(192, 220, 45, 0.5);
  box-shadow: 0 0 0 3px rgba(192, 220, 45, 0.2), 0 0 20px rgba(192, 220, 45, 0.15);
  outline: none;
}

/* ============================================
   PREMIUM CARD STYLES
   ============================================ */
.card-premium {
  position: relative;
  background: var(--card-bg);
  border-radius: 20px;
  padding: 1.5rem;
  transition: all 0.4s var(--ease-premium);
  border: 1px solid var(--card-border);
}

.card-premium:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.dark .card-premium {
  background: linear-gradient(135deg, rgba(19, 36, 62, 0.8) 0%, rgba(10, 22, 40, 0.9) 100%);
  border: 1px solid rgba(192, 220, 45, 0.1);
}

.dark .card-premium:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(192, 220, 45, 0.15);
}

/* ============================================
   PREMIUM BUTTONS
   ============================================ */
.btn-premium {
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--ease-premium);
  transform: translateZ(0);
}

.btn-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.btn-premium:hover::before {
  transform: translateX(100%);
}

.btn-premium:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 30px rgba(192, 220, 45, 0.3);
}

.btn-premium:active {
  transform: translateY(0) scale(0.98);
}

.btn-premium:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(192, 220, 45, 0.4), 0 10px 30px rgba(192, 220, 45, 0.3);
}

.btn-premium-glass {
  background: linear-gradient(135deg, rgba(192, 220, 45, 0.9) 0%, rgba(192, 220, 45, 1) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(192, 220, 45, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-premium-outline {
  background: transparent;
  border: 2px solid rgba(192, 220, 45, 0.5);
  color: #C0DC2D;
  transition: all 0.3s var(--ease-premium);
}

.btn-premium-outline:hover {
  background: rgba(192, 220, 45, 0.1);
  border-color: #C0DC2D;
  box-shadow: 0 0 20px rgba(192, 220, 45, 0.2);
}

/* ============================================
   PREMIUM GRADIENT TEXT
   ============================================ */
.gradient-text {
  background: linear-gradient(135deg, #C0DC2D 0%, #d4f059 50%, #C0DC2D 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientText 4s ease infinite;
}

@keyframes gradientText {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* ============================================
   STAT COUNTER STYLES
   ============================================ */
.stat-number {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ============================================
   ICON HOP ANIMATION
   ============================================ */
@keyframes iconHop {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-8px) scale(1.1);
  }
}

.icon-container-premium {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.icon-container-premium:hover {
  animation: iconHop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   ACCENT BORDER
   ============================================ */
.accent-border-left {
  position: relative;
}

.accent-border-left::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, #C0DC2D, rgba(192, 220, 45, 0.3));
  border-radius: 2px;
}

/* ============================================
   PROGRESS INDICATOR
   ============================================ */
.progress-step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-weight: 600;
  transition: all 0.4s var(--ease-premium);
}

.progress-step-inactive {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.progress-step-active {
  background: #C0DC2D;
  color: #13243E;
  border: 2px solid #C0DC2D;
  box-shadow: 0 0 20px rgba(192, 220, 45, 0.4);
}

.progress-step-completed {
  background: rgba(192, 220, 45, 0.2);
  color: #C0DC2D;
  border: 2px solid #C0DC2D;
}

.progress-connector {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.4s ease;
}

.progress-connector-active {
  background: #C0DC2D;
}

/* Existing floating animations */
@keyframes float {

  0%,
  100% {
    transform: translateY(0px) rotate(12deg);
  }

  50% {
    transform: translateY(-10px) rotate(12deg);
  }
}

@keyframes float-delayed {

  0%,
  100% {
    transform: translateY(0px) rotate(-12deg);
  }

  50% {
    transform: translateY(-15px) rotate(-12deg);
  }
}

@keyframes float-slow {

  0%,
  100% {
    transform: translateY(0px) rotate(45deg);
  }

  50% {
    transform: translateY(-8px) rotate(45deg);
  }
}

@keyframes float-reverse {

  0%,
  100% {
    transform: translateY(0px) rotate(-45deg);
  }

  50% {
    transform: translateY(-12px) rotate(-45deg);
  }
}

.animate-float {
  animation: float 4.8s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-delayed 6.4s ease-in-out infinite;
  animation-delay: 1.6s;
}

.animate-float-slow {
  animation: float-slow 8s ease-in-out infinite;
  animation-delay: 3.2s;
}

.animate-float-reverse {
  animation: float-reverse 5.6s ease-in-out infinite;
  animation-delay: 0.8s;
}

/* Optimized entrance animations with better easing */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes typewriter {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(192, 220, 45, 0.3);
  }

  50% {
    box-shadow: 0 0 30px rgba(192, 220, 45, 0.6);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Optimized animation classes with better performance */
.animate-fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  will-change: transform, opacity;
}

.animate-fade-in-left {
  animation: fadeInLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  will-change: transform, opacity;
}

.animate-fade-in-right {
  animation: fadeInRight 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  will-change: transform, opacity;
}

.animate-scale-in {
  animation: scaleIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: transform, opacity;
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

.animate-shimmer {
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

.animate-count-up {
  animation: countUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: transform, opacity;
}

/* Optimized staggered animation delays */
.animate-delay-100 {
  animation-delay: 0.1s;
}

.animate-delay-200 {
  animation-delay: 0.2s;
}

.animate-delay-300 {
  animation-delay: 0.3s;
}

.animate-delay-400 {
  animation-delay: 0.4s;
}

.animate-delay-500 {
  animation-delay: 0.5s;
}

.animate-delay-600 {
  animation-delay: 0.6s;
}

/* Enhanced hover effects with better performance */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.hover-scale {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-glow {
  transition: box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hover-glow:hover {
  box-shadow: 0 0 30px rgba(192, 220, 45, 0.4);
}

/* Optimized button animations */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent);
  transition: left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-shimmer:hover::before {
  left: 100%;
}

/* Scroll reveal animations with better performance */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Optimized typing indicator animation */
@keyframes typing {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  30% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

.typing-dot {
  animation: typing 1.4s infinite ease-in-out;
  will-change: transform;
}

.typing-dot:nth-child(1) {
  animation-delay: 0s;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* Optimized message bubble animations */
@keyframes slideInMessage {
  from {
    opacity: 0;
    transform: translateX(-30px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes slideInMessageRight {
  from {
    opacity: 0;
    transform: translateX(30px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.message-slide-in-left {
  animation: slideInMessage 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: transform, opacity;
}

.message-slide-in-right {
  animation: slideInMessageRight 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: transform, opacity;
}

/* Performance optimizations */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Mobile-specific overrides for chat demo */
@media (max-width: 768px) {

  /* Disable all chat demo animations on mobile */
  .message-slide-in-left,
  .message-slide-in-right {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Disable typing indicator animation on mobile */
  .typing-dot {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Disable hover effects on mobile */
  .hover-lift:hover,
  .hover-scale:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Ensure chat demo container has no hover effects */
  .hover-lift {
    transition: none !important;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hover-lift:hover,
  .hover-scale:hover {
    transform: none !important;
  }

  /* Disable all chat demo animations for reduced motion */
  .message-slide-in-left,
  .message-slide-in-right,
  .typing-dot {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Intersection observer optimization */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Prevent layout shifts during animations */
.animation-container {
  contain: layout style paint;
}

/* Optimize repaints */
.optimized-animation {
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* AI Sparkle animation */
@keyframes sparkle-pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(0.95);
  }
}

/* ============================================
   CHECKBOX CARD INDICATOR STYLES
   Uses :has() selector for parent-aware styling
   ============================================ */
/* Checkbox indicator styling when checked */
label:has(.delivery-checkbox:checked) .checkbox-indicator,
label:has(.feedback-checkbox:checked) .checkbox-indicator {
  background-color: #C0DC2D;
  border-color: #C0DC2D;
}

label:has(.delivery-checkbox:checked) .checkbox-check,
label:has(.feedback-checkbox:checked) .checkbox-check {
  opacity: 1;
}

/* ============================================
   SCROLLBAR UTILITIES
   ============================================ */
/* Hide scrollbar but keep scroll functionality */
.scrollbar-hide {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

/* ============================================
   PREMIUM DAMPED ANIMATIONS
   ============================================ */
/* Damped spring easing for premium feel */
.ease-damped {
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Button press feedback */
.btn-press {
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-press:active {
  transform: scale(0.95);
}

/* Suggestion bubble entrance */
@keyframes suggestionSlideIn {
  from {
    opacity: 0;
    transform: translateX(30px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.suggestion-enter {
  animation: suggestionSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Message bubble entrance from left (customer) */
@keyframes messageSlideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Message bubble entrance from right (operator/bot) */
@keyframes messageSlideInRight {
  from {
    opacity: 0;
    transform: translateX(20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.message-enter-left {
  animation: messageSlideInLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.message-enter-right {
  animation: messageSlideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}