@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    /* Light Theme - Green Futuristic */
    --background: 0 0% 100%;
    --foreground: 120 15% 15%;

    --card: 0 0% 100%;
    --card-foreground: 120 15% 15%;
 
    --popover: 0 0% 100%;
    --popover-foreground: 120 15% 15%;
 
    --primary: 142 76% 36%;
    --primary-foreground: 0 0% 100%;
 
    --secondary: 120 30% 90%;
    --secondary-foreground: 120 15% 15%;
 
    --muted: 120 20% 95%;
    --muted-foreground: 120 16.3% 46.9%;
 
    --accent: 120 100% 25%;
    --accent-foreground: 0 0% 100%;
 
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;

    --border: 120 30% 85%;
    --input: 120 30% 90%;
    --ring: 142 76% 36%;
 
    --radius: 0.75rem;
    
    /* Futuristic Gradient Variables - Green Theme */
    --gradient-primary: linear-gradient(135deg, hsl(142 76% 36%), hsl(120 100% 25%));
    --gradient-secondary: linear-gradient(135deg, hsl(120 60% 50%), hsl(142 80% 40%));
    --gradient-accent: linear-gradient(135deg, hsl(120 100% 30%), hsl(140 100% 35%));
    --glow-primary: 0 0 12px hsla(142, 76%, 36%, 0.25);
    --glow-accent: 0 0 8px hsla(120, 100%, 25%, 0.2);
  }
 
  .dark {
    /* Dark Theme - Green Cyberpunk Neon */
    --background: 120 25% 8%;
    --foreground: 120 100% 95%;
 
    --card: 120 20% 10%;
    --card-foreground: 120 100% 95%;
 
    --popover: 120 20% 10%;
    --popover-foreground: 120 100% 95%;
 
    --primary: 120 100% 70%;
    --primary-foreground: 120 25% 8%;
 
    --secondary: 140 100% 15%;
    --secondary-foreground: 120 100% 95%;
 
    --muted: 120 15% 15%;
    --muted-foreground: 120 20.2% 65.1%;
 
    --accent: 142 100% 65%;
    --accent-foreground: 120 25% 8%;
 
    --destructive: 0 75% 55%;
    --destructive-foreground: 0 0% 98%;
 
    --border: 120 15% 20%;
    --input: 120 15% 18%;
    --ring: 120 100% 70%;
    
    /* Dark Futuristic Gradient Variables - Green Theme */
    --gradient-primary: linear-gradient(135deg, hsl(120 100% 70%), hsl(142 100% 75%));
    --gradient-secondary: linear-gradient(135deg, hsl(140 100% 40%), hsl(120 80% 60%));
    --gradient-accent: linear-gradient(135deg, hsl(142 100% 65%), hsl(120 100% 70%));
    --glow-primary: 0 0 15px hsla(120, 100%, 70%, 0.35);
    --glow-accent: 0 0 10px hsla(142, 100%, 65%, 0.3);
  }
}
 
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    background-image: 
      radial-gradient(circle at 20% 80%, hsla(142, 76%, 36%, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, hsla(120, 100%, 25%, 0.1) 0%, transparent 50%);
    background-attachment: fixed;
  }
}

/* Futuristic UI Enhancements */
@layer components {
  .futuristic-header {
    background: linear-gradient(90deg, 
      hsla(120, 25%, 95%, 0.9) 0%, 
      hsla(142, 100%, 98%, 0.95) 50%, 
      hsla(120, 25%, 95%, 0.9) 100%);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid hsla(142, 76%, 36%, 0.3);
    box-shadow: 0 4px 20px hsla(142, 76%, 36%, 0.1);
  }
  
  .dark .futuristic-header {
    background: linear-gradient(90deg, 
      hsla(120, 25%, 8%, 0.9) 0%, 
      hsla(142, 100%, 10%, 0.95) 50%, 
      hsla(120, 25%, 8%, 0.9) 100%);
    border-bottom: 1px solid hsla(120, 100%, 70%, 0.3);
    box-shadow: 0 4px 20px hsla(120, 100%, 70%, 0.1);
  }
  
  .futuristic-sidebar {
    background: linear-gradient(180deg, 
      hsla(120, 25%, 98%, 0.95) 0%, 
      hsla(142, 80%, 97%, 0.98) 100%);
    backdrop-filter: blur(10px);
    border-right: 1px solid hsla(142, 76%, 36%, 0.2);
  }
  
  .dark .futuristic-sidebar {
    background: linear-gradient(180deg, 
      hsla(120, 25%, 8%, 0.95) 0%, 
      hsla(142, 80%, 5%, 0.98) 100%);
    border-right: 1px solid hsla(120, 100%, 70%, 0.2);
  }
  
  /* Enhanced navigation hover effects */
  .futuristic-sidebar .hover\:bg-primary\/20:hover {
    background: linear-gradient(135deg, 
      hsla(142, 76%, 36%, 0.15) 0%, 
      hsla(120, 100%, 25%, 0.2) 100%) !important;
    box-shadow: 0 2px 10px hsla(142, 76%, 36%, 0.2);
  }
  
  .dark .futuristic-sidebar .hover\:bg-primary\/20:hover {
    background: linear-gradient(135deg, 
      hsla(120, 100%, 70%, 0.15) 0%, 
      hsla(142, 100%, 65%, 0.2) 100%) !important;
    box-shadow: 0 2px 10px hsla(120, 100%, 70%, 0.2);
  }
  
  .futuristic-card {
    background: linear-gradient(135deg, 
      hsla(120, 25%, 99%, 0.8) 0%, 
      hsla(142, 40%, 98%, 0.9) 100%);
    border: 1px solid hsla(142, 76%, 36%, 0.3);
    box-shadow: var(--glow-primary);
    backdrop-filter: blur(8px);
  }
  
  .dark .futuristic-card {
    background: linear-gradient(135deg, 
      hsla(120, 25%, 12%, 0.8) 0%, 
      hsla(142, 40%, 8%, 0.9) 100%);
    border: 1px solid hsla(120, 100%, 70%, 0.3);
  }
  
  .futuristic-button-primary {
    background: var(--gradient-primary);
    box-shadow: var(--glow-primary);
    border: 1px solid hsla(142, 76%, 36%, 0.5);
    transition: all 0.3s ease;
  }
  
  .dark .futuristic-button-primary {
    border: 1px solid hsla(120, 100%, 70%, 0.5);
  }
  
  .futuristic-button-primary:hover {
    box-shadow: var(--glow-primary), 0 0 30px hsla(142, 76%, 36%, 0.4);
    transform: translateY(-2px);
  }
  
  .dark .futuristic-button-primary:hover {
    box-shadow: var(--glow-primary), 0 0 30px hsla(120, 100%, 70%, 0.4);
  }
  
  .futuristic-input {
    background: hsla(120, 25%, 98%, 0.6);
    border: 1px solid hsla(142, 76%, 36%, 0.4);
    box-shadow: inset 0 2px 8px hsla(120, 25%, 90%, 0.3);
  }
  
  .dark .futuristic-input {
    background: hsla(120, 25%, 8%, 0.6);
    border: 1px solid hsla(120, 100%, 70%, 0.4);
    box-shadow: inset 0 2px 8px hsla(120, 25%, 0%, 0.3);
  }
  
  .futuristic-input:focus {
    box-shadow: var(--glow-accent), inset 0 2px 8px hsla(120, 25%, 90%, 0.3);
    border-color: hsl(142, 76%, 36%);
  }
  
  .dark .futuristic-input:focus {
    box-shadow: var(--glow-accent), inset 0 2px 8px hsla(120, 25%, 0%, 0.3);
    border-color: hsl(120, 100%, 70%);
  }
  
  .neon-text {
    color: hsl(142, 76%, 36%);
    text-shadow: 
      0 0 2px hsla(142, 76%, 36%, 0.3),
      0 0 4px hsla(142, 76%, 36%, 0.2),
      0 0 6px hsla(142, 76%, 36%, 0.1);
  }
  
  .dark .neon-text {
    color: hsl(120, 100%, 70%);
    text-shadow: 
      0 0 3px hsla(120, 100%, 70%, 0.4),
      0 0 6px hsla(120, 100%, 70%, 0.25),
      0 0 8px hsla(120, 100%, 70%, 0.15);
  }
  
  .cyber-border {
    position: relative;
  }
  
  .cyber-border::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    background: var(--gradient-primary);
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: subtract;
  }
  
  /* Animated gradient backgrounds */
  .animated-gradient {
    background: linear-gradient(45deg, 
      hsl(142, 76%, 36%), 
      hsl(120, 100%, 25%), 
      hsl(140, 100%, 30%), 
      hsl(142, 80%, 40%));
    background-size: 400% 400%;
    animation: gradientFlow 6s ease infinite;
  }
  
  .dark .animated-gradient {
    background: linear-gradient(45deg, 
      hsl(120, 100%, 70%), 
      hsl(142, 100%, 65%), 
      hsl(140, 100%, 60%), 
      hsl(120, 80%, 75%));
  }
  
  @keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  .pulse-glow {
    animation: pulseGlow 3s ease-in-out infinite alternate;
  }
  
  @keyframes pulseGlow {
    from { box-shadow: var(--glow-primary); }
    to { box-shadow: var(--glow-primary), var(--glow-accent); }
  }
}

/* Performance optimizations */
* {
  will-change: auto;
}

/* Reduce paint and layout thrashing */
.futuristic-sidebar,
.futuristic-header {
  contain: layout style;
}

/* GPU acceleration for animations */
.neon-text,
.futuristic-button-primary,
.futuristic-glow {
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* Optimize text rendering */
body {
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}