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

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

:root {
  --primary-blue: 59 130 246;
  --primary-dark: 30 41 59;
  --gray-50: 248 250 252;
  --gray-100: 241 245 249;
  --gray-200: 226 232 240;
  --gray-300: 203 213 225;
  --gray-400: 148 163 184;
  --gray-500: 100 116 139;
  --gray-600: 71 85 105;
  --gray-700: 51 65 85;
  --gray-800: 30 41 59;
  --gray-900: 15 23 42;
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: rgb(var(--gray-50));
  color: rgb(var(--gray-900));
}

.gradient-bg {
  background: linear-gradient(135deg, rgb(var(--gray-50)) 0%, rgb(var(--gray-100)) 100%);
}

.hero-gradient {
  background: linear-gradient(135deg, rgb(var(--gray-50)) 0%, rgb(var(--gray-100)) 50%, rgb(var(--gray-200)) 100%);
}

.text-gradient {
  background: linear-gradient(135deg, rgb(var(--primary-blue)) 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn-primary {
  @apply bg-blue-500 hover:bg-blue-600 text-white font-medium px-6 py-3 rounded-lg transition-colors duration-200;
}

.btn-secondary {
  @apply bg-slate-800 hover:bg-slate-700 text-white font-medium px-6 py-3 rounded-lg transition-colors duration-200;
}

.card-shadow {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.tech-badge {
  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-white border border-gray-200;
}

.service-card {
  @apply bg-white rounded-xl p-8 card-shadow hover:shadow-lg transition-shadow duration-300;
}

.case-study-card {
  @apply bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-8 text-white;
}

.mobile-menu-overlay {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.cookie-consent {
  @apply fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:max-w-md bg-white rounded-lg p-6 card-shadow z-50;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}