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

:root {
  --primary: 199 89% 48%;
  --primary-foreground: 210 40% 98%;
  
  --secondary: 259 94% 61%;
  --secondary-foreground: 210 40% 98%;
  
  --success: 142 70% 45%;
  --success-foreground: 144 80% 98%;
  
  --warning: 38 92% 50%;
  --warning-foreground: 48 96% 98%;
  
  --danger: 0 84% 60%;
  --danger-foreground: 210 40% 98%;
  
  --background: 0 0% 100%;
  --foreground: 222 84% 4.9%;
  
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  
  --border: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
  --radius: 0.5rem;
}

.dark {
  --primary: 199 89% 48%;
  --primary-foreground: 210 40% 98%;
  
  --secondary: 262 83% 58%;
  --secondary-foreground: 210 40% 98%;
  
  --success: 142 70% 45%;
  --success-foreground: 144 80% 98%;
  
  --warning: 38 92% 50%;
  --warning-foreground: 48 96% 98%;
  
  --danger: 0 70% 50%;
  --danger-foreground: 210 40% 98%;
  
  --background: 222 47% 11%;
  --foreground: 210 40% 98%;
  
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  
  --border: 217.2 32.6% 17.5%;
  --ring: 224.3 76.3% 48%;
}

/* Apply base styles */
@layer base {
  * {
    @apply border-border;
  }
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  body {
    @apply bg-background text-foreground;
}
  h1, h2, h3, h4, h5, h6 {
    @apply font-medium tracking-tight;
  }
  h1 {
    @apply text-3xl md:text-4xl;
  }
  h2 {
    @apply text-2xl md:text-3xl;
  }
  h3 {
    @apply text-xl md:text-2xl;
  }
  p {
    @apply leading-relaxed;
  }
}

/* Custom utility classes */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .gradient-primary {
    @apply bg-gradient-to-br from-primary-500 to-primary-600;
  }
  
  .gradient-secondary {
    @apply bg-gradient-to-br from-secondary-500 to-secondary-600;
  }
  
  .card-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  
  .card-shadow-hover {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
  }
  
  .card-shadow-hover:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
  }
  
  .font-feature-settings {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }
  
  /* Animation utilities */
  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  .animate-glow {
    animation: glow 3s ease-in-out infinite alternate;
  }
  
  .animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
  }
  
  .thin-scrollbar::-webkit-scrollbar {
    width: 4px;
  }
  
  .thin-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .thin-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.3);
    border-radius: 9999px;
  }
  
  .thin-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
  }
}

/* Keyframe animations */
@keyframes pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

@keyframes glow {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(0deg);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: translateX(100%) rotate(45deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}