@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

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

/* ConvexHire Design System - Professional recruitment platform with modern aesthetics */

@layer base {
  :root {
    /* Core Colors */
    --background: 0 0% 100%;
    --foreground: 222 47% 11%;
    
    /* Brand Colors */
    --brand: 221 83% 53%;
    --brand-dark: 221 83% 43%;
    --brand-light: 221 83% 63%;
    --brand-foreground: 0 0% 100%;
    
    /* Card & Surface */
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --card-hover: 210 40% 98%;
    
    /* Popover */
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    
    /* Primary - Deep professional blue */
    --primary: 221 83% 53%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 221 83% 43%;
    
    /* Secondary - Soft neutral */
    --secondary: 210 40% 96%;
    --secondary-foreground: 222 47% 11%;
    --secondary-hover: 210 40% 91%;
    
    /* Muted - For subtle backgrounds */
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;
    
    /* Accent - Fresh green for success/positive */
    --accent: 142 71% 45%;
    --accent-foreground: 0 0% 100%;
    --accent-hover: 142 71% 35%;
    
    /* Success/Warning/Destructive */
    --success: 142 71% 45%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    
    /* Borders & Inputs */
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 221 83% 53%;
    
    /* Gradients */
    --gradient-brand: linear-gradient(135deg, hsl(221 83% 53%), hsl(217 91% 60%));
    --gradient-subtle: linear-gradient(180deg, hsl(0 0% 100%), hsl(210 40% 98%));
    --gradient-hero: linear-gradient(135deg, hsl(221 83% 53%), hsl(217 91% 60%), hsl(213 94% 68%));
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 hsl(222 47% 11% / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(222 47% 11% / 0.07);
    --shadow-lg: 0 10px 15px -3px hsl(222 47% 11% / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(222 47% 11% / 0.1);
    
    /* Radius */
    --radius: 0.75rem;
    --radius-sm: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    
    /* Animations - Clean, smooth, fluid, minimal */
    --transition-fast: 120ms;
    --transition-base: 200ms;
    --transition-slow: 300ms;
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-gentle: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .dark {
    --background: 222 47% 11%;
    --foreground: 0 0% 95%;
    
    --brand: 217 91% 60%;
    --brand-dark: 221 83% 53%;
    --brand-light: 213 94% 68%;
    --brand-foreground: 222 47% 11%;
    
    --card: 222 47% 15%;
    --card-foreground: 0 0% 95%;
    --card-hover: 222 47% 18%;
    
    --popover: 222 47% 15%;
    --popover-foreground: 0 0% 95%;
    
    --primary: 217 91% 60%;
    --primary-foreground: 222 47% 11%;
    --primary-hover: 217 91% 70%;
    
    --secondary: 217 33% 17%;
    --secondary-foreground: 0 0% 95%;
    --secondary-hover: 217 33% 22%;
    
    --muted: 217 33% 17%;
    --muted-foreground: 215 20% 65%;
    
    --accent: 142 71% 45%;
    --accent-foreground: 0 0% 100%;
    --accent-hover: 142 71% 55%;
    
    --success: 142 71% 45%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;
    --destructive: 0 63% 31%;
    --destructive-foreground: 0 0% 95%;
    
    --border: 217 33% 17%;
    --input: 217 33% 17%;
    --ring: 217 91% 60%;
    
    --gradient-brand: linear-gradient(135deg, hsl(217 91% 60%), hsl(213 94% 68%));
    --gradient-subtle: linear-gradient(180deg, hsl(222 47% 11%), hsl(222 47% 15%));
    --gradient-hero: linear-gradient(135deg, hsl(217 91% 60%), hsl(213 94% 68%), hsl(209 97% 75%));
    
    --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.1);
    --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.2);
    --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.3);
    --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.4);
  }
}

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

  body {
    @apply bg-background text-foreground font-inter antialiased;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold;
    letter-spacing: -0.5%;
  }

  p {
    line-height: 1.7;
  }

  /* Smooth scrolling for anchor links */
  html {
    scroll-behavior: smooth;
  }
  
  /* Respect user's motion preferences */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
  
  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-muted;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-muted-foreground/20 rounded-full;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-muted-foreground/30;
  }
}

@layer components {
  /* Glass effect */
  .glass {
    @apply bg-card/60 backdrop-blur-lg border-border/50;
  }
  
  /* Gradient text */
  .gradient-text {
    @apply bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent;
  }
  
  /* Card hover effect */
  .card-hover {
    @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
  }
  
  /* Stat card gradient border */
  .stat-card {
    @apply relative overflow-hidden rounded-xl;
    background: linear-gradient(white, white) padding-box,
                var(--gradient-brand) border-box;
    border: 2px solid transparent;
  }
}

@layer utilities {
  /* Animation utilities - Optimized for smooth performance */
  .animate-in {
    animation: fadeIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
  }
  
  .animate-slide-up {
    animation: slideUp 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
  }
  
  .animate-slide-down {
    animation: slideDown 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
  }
  
  .animate-slide-in-right {
    animation: slideInRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
  }
  
  .animate-slide-in-left {
    animation: slideInLeft 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
  }
  
  .animate-scale-in {
    animation: scaleIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: opacity, transform;
  }
  
  .animate-scale-out {
    animation: scaleOut 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
  }
  
  .animate-bounce-in {
    animation: bounceIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: opacity, transform;
  }
  
  .animate-fade-in-up {
    animation: fadeInUp 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
  }
  
  .animate-fade-in-down {
    animation: fadeInDown 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
  }
  
  .animate-fade-in-left {
    animation: fadeInLeft 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
  }
  
  .animate-fade-in-right {
    animation: fadeInRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
  }
  
  .animate-zoom-in {
    animation: zoomIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: opacity, transform;
  }
  
  .animate-zoom-out {
    animation: zoomOut 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
  }
  
  .animate-float {
    animation: float 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    will-change: transform;
  }
  
  .animate-gradient {
    animation: gradient 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    will-change: background-position;
  }
  
  /* Shimmer loading effect */
  .shimmer {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    background-size: 200px 100%;
    animation: shimmer 1.5s ease-in-out infinite;
  }
  
  /* Enhanced hover effects - Clean, smooth, fluid, minimal */
  .hover-lift {
    transition: transform var(--transition-base) var(--ease-smooth), box-shadow var(--transition-base) var(--ease-smooth);
  }
  
  .hover-lift:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
  
  .hover-scale {
    transition: transform var(--transition-base) var(--ease-smooth);
  }
  
  .hover-scale:hover {
    transform: scale(1.02);
  }
  
  .hover-glow {
    transition: box-shadow var(--transition-base) var(--ease-smooth);
  }
  
  .hover-glow:hover {
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.2);
  }
  
  .hover-rotate {
    transition: transform var(--transition-base) var(--ease-smooth);
  }
  
  .hover-rotate:hover {
    transform: rotate(2deg);
  }
  
  .hover-gentle {
    transition: all var(--transition-base) var(--ease-smooth);
  }
  
  .hover-gentle:hover {
    transform: translateY(-0.5px);
    box-shadow: var(--shadow-sm);
  }
  
  /* Focus states */
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-primary/20 focus:ring-offset-2;
  }
  
  /* Smooth transitions - Clean, smooth, fluid, minimal */
  .transition-smooth {
    transition: all var(--transition-base) var(--ease-smooth);
  }
  
  .transition-fast {
    transition: all var(--transition-fast) var(--ease-smooth);
  }
  
  .transition-slow {
    transition: all var(--transition-slow) var(--ease-smooth);
  }
  
  .transition-spring {
    transition: all var(--transition-base) var(--ease-spring);
  }
  
  .transition-gentle {
    transition: all var(--transition-base) var(--ease-gentle);
  }
  
  /* Optimized stagger animations */
  .stagger-1 {
    animation-delay: 0.05s;
  }
  
  .stagger-2 {
    animation-delay: 0.1s;
  }
  
  .stagger-3 {
    animation-delay: 0.15s;
  }
  
  .stagger-4 {
    animation-delay: 0.2s;
  }
  
  .stagger-5 {
    animation-delay: 0.25s;
  }
  
  /* Smooth stagger for lists */
  .stagger-list > * {
    animation: fadeInUp 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    will-change: opacity, transform;
  }
  
  .stagger-list > *:nth-child(1) { animation-delay: 0.05s; }
  .stagger-list > *:nth-child(2) { animation-delay: 0.1s; }
  .stagger-list > *:nth-child(3) { animation-delay: 0.15s; }
  .stagger-list > *:nth-child(4) { animation-delay: 0.2s; }
  .stagger-list > *:nth-child(5) { animation-delay: 0.25s; }
  .stagger-list > *:nth-child(6) { animation-delay: 0.3s; }
  .stagger-list > *:nth-child(7) { animation-delay: 0.35s; }
  .stagger-list > *:nth-child(8) { animation-delay: 0.4s; }
  
  /* Page transition utilities */
  .page-enter {
    opacity: 0;
    transform: translateY(20px);
  }
  
  .page-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  }
  
  .page-exit {
    opacity: 1;
    transform: translateY(0);
  }
  
  .page-exit-active {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(16px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.96);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  @keyframes shimmer {
    0% {
      background-position: -200px 0;
    }
    100% {
      background-position: calc(200px + 100%) 0;
    }
  }
}