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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 220 15% 20%;

    --card: 0 0% 100%;
    --card-foreground: 220 15% 20%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 15% 20%;

    /* Professional slate-based primary */
    --primary: 220 25% 15%;
    --primary-foreground: 0 0% 98%;
    --primary-soft: 220 15% 94%;
    --primary-accent: 140 60% 45%;

    /* Sophisticated neutrals */
    --secondary: 220 8% 96%;
    --secondary-foreground: 220 15% 20%;

    /* Clean grays */
    --muted: 220 10% 97%;
    --muted-foreground: 220 8% 45%;

    /* Subtle accent */
    --accent: 220 12% 95%;
    --accent-foreground: 220 15% 20%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;

    --border: 220 12% 92%;
    --input: 220 12% 96%;
    --ring: 220 25% 15%;

    --radius: 0.75rem;

    /* Professional gradients */
    --gradient-primary: linear-gradient(135deg, hsl(220 25% 15%), hsl(220 20% 25%));
    --gradient-hero: linear-gradient(135deg, hsl(220 30% 12%) 0%, hsl(220 25% 18%) 50%, hsl(140 40% 20%) 100%);
    --gradient-soft: linear-gradient(180deg, hsl(var(--background)), hsl(var(--muted)));
    --gradient-accent: linear-gradient(135deg, hsl(140 60% 45%), hsl(140 70% 35%));
    
    /* Premium shadows */
    --shadow-elegant: 0 20px 40px -12px hsl(220 25% 15% / 0.12);
    --shadow-premium: 0 32px 64px -12px hsl(220 25% 15% / 0.16);
    --shadow-glow: 0 0 60px hsl(140 60% 45% / 0.25);
    
    /* Smooth transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-spring: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 220 30% 6%;
    --foreground: 220 8% 92%;

    --card: 220 25% 8%;
    --card-foreground: 220 8% 92%;

    --popover: 220 25% 8%;
    --popover-foreground: 220 8% 92%;

    --primary: 220 8% 92%;
    --primary-foreground: 220 30% 6%;
    --primary-soft: 220 15% 20%;
    --primary-accent: 140 60% 55%;

    --secondary: 220 15% 12%;
    --secondary-foreground: 220 8% 92%;

    --muted: 220 15% 12%;
    --muted-foreground: 220 8% 65%;

    --accent: 220 20% 15%;
    --accent-foreground: 220 8% 92%;

    --destructive: 0 62% 50%;
    --destructive-foreground: 0 0% 98%;

    --border: 220 15% 18%;
    --input: 220 15% 12%;
    --ring: 220 8% 92%;
    
    --gradient-hero: linear-gradient(135deg, hsl(220 40% 8%) 0%, hsl(220 30% 12%) 50%, hsl(140 30% 15%) 100%);
    --shadow-elegant: 0 20px 40px -12px hsl(220 30% 6% / 0.4);
    --shadow-premium: 0 32px 64px -12px hsl(220 30% 6% / 0.5);
    --shadow-glow: 0 0 60px hsl(140 60% 45% / 0.3);
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

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

  body {
    @apply bg-background text-foreground font-sans antialiased;
  }

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

@layer components {
  /* Premium button variants */
  .btn-hero {
    @apply bg-gradient-accent text-white
           px-8 py-4 rounded-xl font-semibold text-lg
           shadow-elegant hover:shadow-premium
           transition-all duration-300
           hover:scale-105 hover:shadow-glow
           relative overflow-hidden;
  }
  
  .btn-hero::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.6s;
  }
  
  .btn-hero:hover::before {
    left: 100%;
  }
  
  /* Premium ghost button */
  .btn-ghost {
    @apply border-2 border-primary text-primary bg-transparent
           px-8 py-4 rounded-xl font-semibold text-lg
           transition-all duration-300
           hover:bg-primary hover:text-primary-foreground
           hover:shadow-elegant hover:scale-105
           relative overflow-hidden;
  }
  
  /* Premium feature cards */
  .feature-card {
    @apply bg-card border border-border rounded-2xl p-8
           shadow-sm hover:shadow-premium
           transition-all duration-500
           hover:scale-[1.02] hover:-translate-y-2
           relative overflow-hidden
           before:absolute before:inset-0 before:bg-gradient-to-r 
           before:from-transparent before:via-primary-accent/5 before:to-transparent
           before:translate-x-[-100%] before:transition-transform before:duration-700
           hover:before:translate-x-[100%];
  }
  
  /* Dynamic gradient text */
  .gradient-text {
    @apply bg-gradient-accent bg-clip-text text-transparent;
  }
  
  /* Floating animation with stagger */
  .floating-element {
    animation: float 6s ease-in-out infinite;
  }
  
  .floating-element:nth-child(2) {
    animation-delay: -2s;
  }
  
  .floating-element:nth-child(3) {
    animation-delay: -4s;
  }
  
  /* Animated mesh background */
  .mesh-gradient {
    background: 
      radial-gradient(circle at 20% 20%, hsl(var(--primary-accent)) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, hsl(220 25% 15%) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, hsl(var(--primary-accent)) 0%, transparent 50%);
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
  }
  
  /* Professional grid pattern */
  .grid-pattern {
    background-image: 
      linear-gradient(hsl(var(--border)) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--border)) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.15;
  }
  
  /* Glassmorphism effect */
  .glass-card {
    @apply bg-white/10 backdrop-blur-md border border-white/20
           rounded-2xl shadow-premium;
  }
  
  /* Particle animation container */
  .particles {
    position: relative;
    overflow: hidden;
  }
  
  .particles::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.3), transparent),
      radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.2), transparent),
      radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.4), transparent),
      radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.3), transparent);
    background-repeat: repeat;
    background-size: 150px 100px;
    animation: particleFloat 20s linear infinite;
  }
}

/* Custom animations */
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes particleFloat {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-100px); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-15px) rotate(1deg); }
  66% { transform: translateY(-10px) rotate(-1deg); }
}

/* Line clamp utilities for text truncation */
@layer utilities {
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Hide Lovable editor badge site-wide */
a[href*="lovable.dev"][href*="utm_source=lovable-badge"],
a[href*="lovable.app"][href*="utm_source=lovable-badge"],
#lovable-badge,
.lovable-badge {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}