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

/* OmniVox AI Design System - Dark Tech Aesthetic
   Primary: Electric Blue (#0078D4) 
   All colors MUST be HSL.
*/

@layer base {
  :root {
    --background: 220 20% 97%;
    --foreground: 220 20% 10%;

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

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

    /* Electric Blue Primary */
    --primary: 207 90% 42%;
    --primary-foreground: 0 0% 100%;
    --primary-soft: 207 40% 92%;
    --primary-accent: 207 90% 52%;

    /* Dark neutrals */
    --secondary: 220 15% 94%;
    --secondary-foreground: 220 20% 10%;

    /* Muted grays */
    --muted: 220 12% 95%;
    --muted-foreground: 220 10% 40%;

    /* Subtle accent */
    --accent: 220 15% 93%;
    --accent-foreground: 220 20% 10%;

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

    --border: 220 15% 88%;
    --input: 220 12% 94%;
    --ring: 207 90% 42%;

    --radius: 0.75rem;

    /* Dark tech gradients */
    --gradient-primary: linear-gradient(135deg, hsl(207 90% 42%), hsl(207 80% 55%));
    --gradient-hero: linear-gradient(135deg, hsl(220 25% 10%) 0%, hsl(220 30% 15%) 50%, hsl(207 40% 20%) 100%);
    --gradient-soft: linear-gradient(180deg, hsl(var(--background)), hsl(var(--muted)));
    --gradient-accent: linear-gradient(135deg, hsl(207 90% 52%), hsl(207 100% 40%));
    
    /* Premium shadows */
    --shadow-elegant: 0 20px 40px -12px hsl(207 90% 42% / 0.15);
    --shadow-premium: 0 32px 64px -12px hsl(220 25% 10% / 0.2);
    --shadow-glow: 0 0 60px hsl(207 90% 52% / 0.3);
    
    /* 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: 207 90% 42%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 12% 95%;
    --sidebar-accent-foreground: 220 20% 10%;
    --sidebar-border: 220 15% 88%;
    --sidebar-ring: 207 90% 52%;
  }

  .dark {
    --background: 220 25% 6%;
    --foreground: 220 10% 95%;

    --card: 220 20% 10%;
    --card-foreground: 220 10% 95%;

    --popover: 220 20% 10%;
    --popover-foreground: 220 10% 95%;

    /* Electric Blue Primary */
    --primary: 207 90% 55%;
    --primary-foreground: 220 25% 6%;
    --primary-soft: 220 20% 18%;
    --primary-accent: 207 95% 60%;

    --secondary: 220 18% 14%;
    --secondary-foreground: 220 10% 95%;

    --muted: 220 18% 14%;
    --muted-foreground: 220 10% 65%;

    --accent: 220 22% 18%;
    --accent-foreground: 220 10% 95%;

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

    --border: 220 18% 20%;
    --input: 220 18% 14%;
    --ring: 207 90% 55%;
    
    --gradient-hero: linear-gradient(135deg, hsl(220 30% 4%) 0%, hsl(220 25% 8%) 50%, hsl(207 35% 12%) 100%);
    --shadow-elegant: 0 20px 40px -12px hsl(220 30% 4% / 0.5);
    --shadow-premium: 0 32px 64px -12px hsl(220 30% 4% / 0.6);
    --shadow-glow: 0 0 60px hsl(207 90% 52% / 0.4);
    
    --sidebar-background: 220 25% 8%;
    --sidebar-foreground: 220 10% 95%;
    --sidebar-primary: 207 90% 55%;
    --sidebar-primary-foreground: 220 25% 6%;
    --sidebar-accent: 220 18% 14%;
    --sidebar-accent-foreground: 220 10% 95%;
    --sidebar-border: 220 18% 20%;
    --sidebar-ring: 207 90% 55%;
  }
}

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

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

  /* Sleek 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/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(207 90% 52% / 0.3) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, hsl(220 25% 15%) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, hsl(207 90% 52% / 0.2) 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;
  }
  
  /* Dark glass card variant */
  .glass-card-dark {
    @apply bg-black/20 backdrop-blur-md border border-white/10
           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;
  }
}

/* ===== OmniVox Overlapping Outline Design Element ===== */
/* Inspired by the logo's offset stroke aesthetic */

/* Offset outline for boxes/cards */
.outline-offset-box {
  position: relative;
}

.outline-offset-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid hsl(var(--primary));
  border-radius: inherit;
  transform: translate(4px, 4px);
  z-index: -1;
  pointer-events: none;
}

.outline-offset-box-lg::before {
  transform: translate(6px, 6px);
  border-width: 3px;
}

/* Animated offset on hover */
.outline-offset-hover {
  position: relative;
  transition: transform 0.3s ease;
}

.outline-offset-hover::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid hsl(var(--primary));
  border-radius: inherit;
  transform: translate(0, 0);
  z-index: -1;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.outline-offset-hover:hover::before {
  transform: translate(4px, 4px);
}

.outline-offset-hover:hover {
  transform: translate(-2px, -2px);
}

/* Text shadow offset effect (for headings) */
.text-offset-shadow {
  text-shadow: 3px 3px 0 hsl(var(--primary));
}

.text-offset-shadow-lg {
  text-shadow: 5px 5px 0 hsl(var(--primary));
}

/* Outline text with offset stroke */
.text-outline-offset {
  position: relative;
  -webkit-text-stroke: 1px hsl(var(--primary));
  color: hsl(var(--foreground));
}

/* Icon/element with offset outline */
.icon-offset-outline {
  position: relative;
  z-index: 1;
}

.icon-offset-outline::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid hsl(var(--primary));
  border-radius: inherit;
  transform: translate(4px, 4px);
  z-index: -1;
}

/* 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;
}