@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(271 81% 56%), hsl(271 81% 65%));
    --gradient-secondary: linear-gradient(135deg, hsl(192 95% 68%), hsl(192 95% 77%));
    --gradient-brand: linear-gradient(135deg, hsl(271 81% 56%), hsl(192 95% 68%));
    --gradient-glass: linear-gradient(135deg, hsl(240 5% 15% / 0.8), hsl(240 5% 15% / 0.4));
    --gradient-mesh: radial-gradient(circle at 20% 20%, hsl(271 81% 56% / 0.3) 0%, transparent 50%), 
                     radial-gradient(circle at 80% 80%, hsl(192 95% 68% / 0.3) 0%, transparent 50%),
                     radial-gradient(circle at 40% 40%, hsl(142 71% 45% / 0.2) 0%, transparent 50%);

    /* Shadow System - Softer, more organic */
    --shadow-glow: 0 0 40px hsl(271 81% 56% / 0.3);
    --shadow-glass: 0 8px 32px hsl(0 0% 0% / 0.3);
    --shadow-elevated: 0 20px 60px hsl(0 0% 0% / 0.4);
    --shadow-soft: 0 4px 20px hsl(0 0% 0% / 0.08);
    --shadow-warm: 0 8px 30px hsl(271 81% 56% / 0.12);

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

  /* Beautiful scrollbars */
  * {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--primary) / 0.6) transparent;
  }

  /* Custom scrollbar styling for webkit browsers */
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, hsl(var(--primary) / 0.6), hsl(var(--primary) / 0.8));
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: var(--transition-smooth);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, hsl(var(--primary) / 0.8), hsl(var(--primary)));
    box-shadow: var(--shadow-glow);
  }

  ::-webkit-scrollbar-corner {
    background: transparent;
  }
}

@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 - More organic feel */
  .hover-scale {
    @apply transition-all duration-300 hover:scale-105;
  }
  
  .hover-scale:hover {
    transform: scale(1.05) rotate(-0.5deg);
    box-shadow: var(--shadow-warm);
  }
  
  /* Organic card styles */
  .organic-card {
    @apply rounded-2xl transition-all duration-300;
    box-shadow: var(--shadow-soft);
  }
  
  .organic-card:hover {
    transform: translateY(-4px) rotate(0.5deg);
    box-shadow: var(--shadow-warm);
  }

  /* 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;
  }
  
  /* Organic floating animation */
  @keyframes float-organic {
    0%, 100% {
      transform: translateY(0px) rotate(-1deg);
    }
    50% {
      transform: translateY(-10px) rotate(1deg);
    }
  }
  
  .float-organic {
    animation: float-organic 6s ease-in-out infinite;
  }
  
  /* Gentle wiggle for human touch */
  @keyframes gentle-wiggle {
    0%, 100% {
      transform: rotate(-0.5deg);
    }
    50% {
      transform: rotate(0.5deg);
    }
  }
  
  .gentle-wiggle {
    animation: gentle-wiggle 3s ease-in-out infinite;
  }
}