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

/* TechZaa Design System
   Brand Colors (HSL):
   - Neon Blue: 193 100% 43% (#00B4D8)
   - Electric Purple: 287 52% 36% (#7B2D8E)
   - Neon Green: 146 51% 36% (#2E8B57)
*/

@layer base {
  :root {
    /* Theme accent (default: neon-blue) */
    --neon-blue: 193 100% 43%;
    --neon-purple: 287 52% 36%;
    --neon-green: 146 51% 36%;
    
    /* Active accent color (changes with theme) */
    --accent-neon: var(--neon-blue);
    --accent-neon-glow: 193 100% 60%;
    
    --background: 0 0% 100%;
    --foreground: 220 20% 10%;

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

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

    --primary: var(--accent-neon);
    --primary-foreground: 0 0% 100%;

    --secondary: 220 15% 95%;
    --secondary-foreground: 220 20% 10%;

    --muted: 220 15% 95%;
    --muted-foreground: 220 10% 45%;

    --accent: 220 15% 96%;
    --accent-foreground: 220 20% 10%;

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

    --border: 220 15% 90%;
    --input: 220 15% 90%;
    --ring: var(--accent-neon);

    --radius: 0.75rem;

    /* Glassmorphism */
    --glass-bg: 0 0% 100% / 0.7;
    --glass-border: 0 0% 100% / 0.3;
    --glass-blur: 20px;

    /* Sidebar */
    --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 25% 6%;
    --foreground: 0 0% 98%;

    --card: 220 25% 8%;
    --card-foreground: 0 0% 98%;

    --popover: 220 25% 8%;
    --popover-foreground: 0 0% 98%;

    --primary: var(--accent-neon);
    --primary-foreground: 0 0% 100%;

    --secondary: 220 20% 15%;
    --secondary-foreground: 0 0% 98%;

    --muted: 220 20% 15%;
    --muted-foreground: 220 10% 60%;

    --accent: 220 20% 15%;
    --accent-foreground: 0 0% 98%;

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

    --border: 220 20% 18%;
    --input: 220 20% 18%;
    --ring: var(--accent-neon);

    /* Glassmorphism Dark */
    --glass-bg: 220 25% 10% / 0.8;
    --glass-border: 0 0% 100% / 0.1;

    /* Sidebar Dark */
    --sidebar-background: 220 25% 8%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 20% 15%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 220 20% 18%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  /* Theme variations */
  .theme-blue {
    --accent-neon: var(--neon-blue);
    --accent-neon-glow: 193 100% 60%;
  }

  .theme-purple {
    --accent-neon: var(--neon-purple);
    --accent-neon-glow: 287 52% 55%;
  }

  .theme-green {
    --accent-neon: var(--neon-green);
    --accent-neon-glow: 146 51% 50%;
  }
   * {
    @apply border-border;
  }

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

  html {
    scroll-behavior: smooth;
  }
}



@layer utilities {
  /* Neon glow effects */
  .neon-glow {
    box-shadow: 
      0 0 5px hsl(var(--accent-neon) / 0.5),
      0 0 20px hsl(var(--accent-neon) / 0.3),
      0 0 40px hsl(var(--accent-neon) / 0.2);
  }

  .neon-glow-strong {
    box-shadow: 
      0 0 10px hsl(var(--accent-neon) / 0.8),
      0 0 30px hsl(var(--accent-neon) / 0.5),
      0 0 60px hsl(var(--accent-neon) / 0.3);
  }

  .neon-text-glow {
    text-shadow: 
      0 0 10px hsl(var(--accent-neon) / 0.8),
      0 0 20px hsl(var(--accent-neon) / 0.5),
      0 0 40px hsl(var(--accent-neon) / 0.3);
  }

  /* Glassmorphism */
  .glass {
    background: hsl(var(--glass-bg));
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid hsl(var(--glass-border));
  }

  .glass-strong {
    background: hsl(var(--glass-bg));
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    /* border: 1px solid hsl(var(--glass-border)); */
  }

  /* Gradient backgrounds */
  .gradient-primary {
    background: linear-gradient(
      135deg,
      hsl(var(--neon-blue)) 0%,
      hsl(var(--neon-purple)) 50%,
      hsl(var(--neon-green)) 100%
    );
  }

.gradient-primary-animated {
  background: linear-gradient(
    180deg,
    hsl(var(--neon-blue)) 0%,
    hsl(var(--neon-purple)) 100%,
 
  );
  
  background-size: 100% 200%;
  animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
  0% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 50% 0%;
  }
}

  /* Animated border gradient */
  .border-gradient {
    position: relative;
    background: hsl(var(--card));
    border-radius: var(--radius);
  }

  .border-gradient::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--radius) + 2px);
    background: linear-gradient(
      135deg,
      hsl(var(--neon-blue)),
      hsl(var(--neon-purple)),
      hsl(var(--neon-green))
    );
    z-index: -1;
  }

  /* Floating animation */
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
  }

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

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

  @keyframes pulse-glow {
    0%, 100% {
      box-shadow: 
        0 0 5px hsl(var(--accent-neon) / 0.5),
        0 0 20px hsl(var(--accent-neon) / 0.3);
    }
    50% {
      box-shadow: 
        0 0 15px hsl(var(--accent-neon) / 0.8),
        0 0 40px hsl(var(--accent-neon) / 0.5),
        0 0 60px hsl(var(--accent-neon) / 0.3);
    }
  }

  /* Shimmer effect */
  .shimmer {
    position: relative;
    overflow: hidden;
  }

  .shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      transparent,
      hsl(var(--accent-neon) / 0.1),
      transparent
    );
    transform: translateX(-100%);
    animation: shimmer 3s infinite;
  }

  @keyframes shimmer {
    100% { transform: translateX(100%); }
  }

  
}

