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

/* Innovative Management System Design System - Beautiful gradients and modern aesthetics */

@layer base {
  :root {
    /* Core Background System */
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;

    /* Card System with Glassmorphism */
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --glass: 240 5% 15%;
    --glass-border: 240 5% 25%;

    /* Popover System */
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;

    /* Brand Colors - Innovative Purple to Teal Gradient System */
    --primary: 271 81% 56%;
    --primary-foreground: 0 0% 98%;
    --primary-glow: 271 81% 65%;
    
    --secondary: 192 95% 68%;
    --secondary-foreground: 240 10% 3.9%;
    --secondary-glow: 192 95% 77%;

    /* Accent System */
    --accent: 142 71% 45%;
    --accent-foreground: 0 0% 98%;
    --accent-glow: 142 71% 55%;

    /* Muted Tones */
    --muted: 240 5% 25%;
    --muted-foreground: 240 5% 65%;

    /* Status Colors */
    --success: 142 71% 45%;
    --success-foreground: 0 0% 98%;
    
    --warning: 48 96% 53%;
    --warning-foreground: 240 10% 3.9%;
    
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 98%;

    /* Input System */
    --border: 240 5% 25%;
    --input: 240 5% 15%;
    --ring: 271 81% 56%;

    --radius: 0.75rem;

    /* Advanced Gradient System */
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-glow)));
    --gradient-secondary: linear-gradient(135deg, hsl(var(--secondary)), hsl(var(--secondary-glow)));
    --gradient-brand: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
    --gradient-glass: linear-gradient(135deg, hsl(var(--glass) / 0.8), hsl(var(--glass) / 0.4));
    --gradient-mesh: radial-gradient(circle at 20% 20%, hsl(var(--primary) / 0.3) 0%, transparent 50%), 
                     radial-gradient(circle at 80% 80%, hsl(var(--secondary) / 0.3) 0%, transparent 50%),
                     radial-gradient(circle at 40% 40%, hsl(var(--accent) / 0.2) 0%, transparent 50%);

    /* Shadow System */
    --shadow-glow: 0 0 40px hsl(var(--primary) / 0.3);
    --shadow-glass: 0 8px 32px hsl(0 0% 0% / 0.3);
    --shadow-elevated: 0 20px 60px hsl(0 0% 0% / 0.4);

    /* Animation Variables */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --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: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --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;
    background: var(--gradient-mesh), hsl(var(--background));
  }
}

@layer components {
  /* Glassmorphism Components */
  .glass {
    background: var(--gradient-glass);
    backdrop-filter: blur(12px);
    border: 1px solid hsl(var(--glass-border));
  }

  .glass-card {
    @apply glass rounded-xl shadow-lg;
    box-shadow: var(--shadow-glass);
  }

  /* Glow Effects */
  .glow-primary {
    box-shadow: var(--shadow-glow);
  }

  .glow-hover {
    transition: var(--transition-smooth);
  }

  .glow-hover:hover {
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
  }

  /* Gradient Backgrounds */
  .bg-gradient-brand {
    background: var(--gradient-brand);
  }

  .bg-gradient-primary {
    background: var(--gradient-primary);
  }

  .bg-gradient-secondary {
    background: var(--gradient-secondary);
  }

  /* Animated Gradients */
  .animated-gradient {
    background: var(--gradient-brand);
    background-size: 200% 200%;
    animation: gradientShift 6s ease infinite;
  }

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

  /* Smooth Transitions */
  .transition-smooth {
    transition: var(--transition-smooth);
  }

  .transition-bounce {
    transition: var(--transition-bounce);
  }

  /* Interactive Elements */
  .story-link {
    @apply relative inline-block after:content-[''] after:absolute after:w-full after:scale-x-0 after:h-0.5 after:bottom-0 after:left-0 after:bg-primary after:origin-bottom-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-bottom-left;
  }

  /* Link Styles for Better Visibility */
  a, .link {
    @apply text-primary hover:text-primary-glow transition-colors duration-200;
  }

  a:visited {
    @apply text-secondary;
  }

  /* Hover Scale Animation */
  .hover-scale {
    @apply transition-transform duration-200 hover:scale-105;
  }

  /* Enhanced Analytics Animations */
  @keyframes draw-circle {
    from {
      stroke-dashoffset: 314.159;
    }
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes slide-up {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes pulse-glow {
    0%, 100% {
      box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
    }
    50% {
      box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
    }
  }

  /* Chart specific animations */
  @keyframes chart-bar-grow {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

  .animate-draw-circle {
    animation: draw-circle 1.5s ease-out forwards;
  }
  
  .animate-slide-up {
    animation: slide-up 0.5s ease-out forwards;
  }
  
  .animate-fade-in {
    animation: fade-in 0.3s ease-out forwards;
  }

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

  .chart-bar {
    animation: chart-bar-grow var(--transition-smooth) forwards;
    transform-origin: left center;
  }
}