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

/* Self-hosted fonts for performance */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('data:font/woff2;charset=utf-8;base64,') format('woff2');
}

/* Critical performance optimizations */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  font-display: swap;
}

/* Fix text contrast for accessibility */
.text-gray-400 {
  color: rgb(107 114 128) !important; /* Darker gray for better contrast */
}

.text-gray-500 {
  color: rgb(75 85 99) !important; /* Darker gray for better contrast */
}

.bg-slate-100 {
  background-color: rgb(241 245 249) !important; /* Better contrast */
}

.bg-white {
  background-color: rgb(255 255 255) !important;
}

/* Critical Resource Hints */
.critical-resource {
  font-display: swap;
}

/* Optimize button interactions and accessibility */
button, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
  min-width: 44px;
}

/* Ensure dialog inputs can receive focus and accept typing */
[data-radix-dialog-content] input,
[data-radix-dialog-content] textarea,
[data-radix-dialog-content] select,
.dialog-content input,
.dialog-content textarea,
.dialog-content select {
  pointer-events: auto !important;
  user-select: auto !important;
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  -webkit-touch-callout: auto !important;
  -webkit-user-drag: auto !important;
  -khtml-user-select: auto !important;
  cursor: text !important;
}

/* Force input focus ability */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  pointer-events: auto !important;
  user-select: auto !important;
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  cursor: text !important;
  -webkit-touch-callout: auto !important;
  -webkit-user-drag: auto !important;
  -khtml-user-select: auto !important;
}

/* Override any potential input blocking */
* input,
*[type="text"],
*[type="email"] {
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  cursor: text !important;
}

/* Ensure dialog content allows interactions */
[data-radix-dialog-content],
.dialog-content {
  pointer-events: auto !important;
}

/* Fix dialog overlay to allow content interaction */
[data-radix-dialog-overlay] {
  pointer-events: auto;
}

/* Ensure proper button contrast */
button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Image optimization with explicit dimensions for PageSpeed */
img {
  height: auto;
  max-width: 100%;
  object-fit: cover;
  loading: lazy;
  decoding: async;
  width: auto;
}

/* Optimize images with explicit dimensions */
img[width][height] {
  aspect-ratio: attr(width) / attr(height);
}

/* Convert images to WebP format when possible */
.webp-supported img {
  content: url(data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==);
}

/* Critical images should load immediately */
img.critical {
  loading: eager;
}

/* Reduce layout shift */
.aspect-ratio-container {
  position: relative;
  width: 100%;
  height: 0;
}

/* Optimize animations and reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Performance-critical utility classes */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

:root {
  --background: 0 0% 100%;
  --foreground: 20 14.3% 4.1%;
  --muted: 60 4.8% 95.9%;
  --muted-foreground: 25 5.3% 44.7%;
  --popover: 0 0% 100%;
  --popover-foreground: 20 14.3% 4.1%;
  --card: 0 0% 100%;
  --card-foreground: 20 14.3% 4.1%;
  --border: 20 5.9% 90%;
  --input: 20 5.9% 90%;
  --primary: 207 90% 54%; /* #3B82F6 */
  --primary-foreground: 211 100% 99%;
  --secondary: 168 76% 42%; /* #10B981 */
  --secondary-foreground: 24 9.8% 10%;
  --accent: 45 93% 47%; /* #F59E0B */
  --accent-foreground: 24 9.8% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 60 9.1% 97.8%;
  --ring: 20 14.3% 4.1%;
  --radius: 0.5rem;
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --primary: 207 90% 54%;
  --primary-foreground: 211 100% 99%;
  --secondary: 168 76% 42%;
  --secondary-foreground: 0 0% 98%;
  --accent: 45 93% 47%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --ring: 240 4.9% 83.9%;
  --radius: 0.5rem;
}

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

  body {
    @apply font-sans antialiased bg-background text-foreground;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
}

.font-inter {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Custom styles for better visual hierarchy */
.bg-primary {
  background-color: hsl(var(--primary));
}

.bg-secondary {
  background-color: hsl(var(--secondary));
}

.bg-accent {
  background-color: hsl(var(--accent));
}

.text-primary {
  color: hsl(var(--primary));
}

.text-secondary {
  color: hsl(var(--secondary));
}

.text-accent {
  color: hsl(var(--accent));
}

/* Custom slow bounce animation for filters */
@keyframes slow-bounce {
  0%, 85% {
    transform: translateY(0);
  }
  5%, 10% {
    transform: translateY(-8px);
  }
  15% {
    transform: translateY(0);
  }
}

.animate-slow-bounce {
  animation: slow-bounce 3s infinite;
}

/* Critical mobile optimizations only */
@media screen and (max-width: 768px) {
  /* Essential performance fixes */
  * { scroll-behavior: auto !important; }
  img { 
    image-rendering: optimizeSpeed;
    content-visibility: auto;
  }
  button { min-height: 44px; min-width: 44px; }
  
  /* Reduce repaints for key elements */
  .animate-pulse { animation-duration: 2s; }
}

/* Disable animations for better performance */
@media (prefers-reduced-motion: reduce) {
  * { 
    animation: none !important;
    transition: none !important;
  }
}