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

:root {
  --primary-gradient: linear-gradient(to right, #2563eb, #4f46e5);
  --secondary-gradient: linear-gradient(to right bottom, #f8fafc, #e0e7ff, #eef2ff);
  --text-primary: #1e293b;
  --text-secondary: #64748b;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-primary);
}

.bg-grid-slate-100 {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(148 163 184 / 0.05)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
}

@layer components {
  .glass-card {
    @apply bg-white/80 backdrop-blur-sm border border-indigo-50/50;
  }

  .primary-button {
    @apply bg-gradient-to-r from-blue-600 to-indigo-600 text-white
    hover:from-blue-700 hover:to-indigo-700
    transition-all duration-200 shadow-lg
    hover:shadow-blue-500/25;
  }

  .secondary-button {
    @apply bg-white text-blue-600 border border-blue-100
    hover:bg-gray-50 transition-all duration-200
    shadow-lg hover:border-blue-200;
  }

  .gradient-text {
    @apply bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent;
  }
}

@layer utilities {
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.animate-shimmer {
  animation: shimmer 2s infinite linear;
  background: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-size: 1000px 100%;
}
