/* Non-critical CSS - loads after initial render */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Optimize font loading */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyeMZhrib2Bg-4.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Performance optimizations */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Optimize animations */
.motion-reduce {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* GPU acceleration for frequently animated elements */
.will-change-transform {
  will-change: transform;
}

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

/* Enhanced number input styling for better UX */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Fix cursor visibility with comprehensive approach */
* {
  caret-color: #000000 !important;
}

input, textarea, [contenteditable] {
  caret-color: #000000 !important;
  text-shadow: none !important;
}

input:focus, textarea:focus, [contenteditable]:focus {
  caret-color: #000000 !important;
}

/* Ensure text color is visible */
input[type="text"], 
input[type="email"], 
input[type="number"], 
input[type="tel"], 
textarea {
  color: #1f2937 !important;
}

/* Custom number input with visible controls */
.number-input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.number-input-controls {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.number-input-container:hover .number-input-controls {
  opacity: 1;
}

.number-input-btn {
  width: 20px;
  height: 15px;
  border: 1px solid #d1d5db;
  background: white;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  transition: all 0.15s ease;
}

.number-input-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #374151;
}

.number-input-btn:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom: none;
}

.number-input-btn:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

:root {
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(20, 14.3%, 4.1%);
  --muted: hsl(60, 4.8%, 95.9%);
  --muted-foreground: hsl(25, 5.3%, 44.7%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(20, 14.3%, 4.1%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(20, 14.3%, 4.1%);
  --border: hsl(20, 5.9%, 90%);
  --input: hsl(20, 5.9%, 90%);
  --primary: hsl(217, 91%, 60%);
  --primary-foreground: hsl(210, 40%, 98%);
  --secondary: hsl(60, 4.8%, 95.9%);
  --secondary-foreground: hsl(24, 9.8%, 10%);
  --accent: hsl(60, 4.8%, 95.9%);
  --accent-foreground: hsl(24, 9.8%, 10%);
  --destructive: hsl(0, 84.2%, 60.2%);
  --destructive-foreground: hsl(60, 9.1%, 97.8%);
  --ring: hsl(20, 14.3%, 4.1%);
  --radius: 0.5rem;

  /* Custom colors for TechAlign Pro */
  --primary-50: hsl(214, 100%, 97%);
  --primary-100: hsl(214, 95%, 93%);
  --primary-500: hsl(217, 91%, 60%);
  --primary-600: hsl(221, 83%, 53%);
  --primary-700: hsl(224, 76%, 48%);
  --primary-900: hsl(224, 64%, 33%);
  --green-500: hsl(142, 71%, 45%);
  --green-600: hsl(142, 76%, 36%);
  --purple-600: hsl(271, 91%, 65%);
  --purple-100: hsl(270, 95%, 97%);
}

.dark {
  --background: hsl(240, 10%, 3.9%);
  --foreground: hsl(0, 0%, 98%);
  --muted: hsl(240, 3.7%, 15.9%);
  --muted-foreground: hsl(240, 5%, 64.9%);
  --popover: hsl(240, 10%, 3.9%);
  --popover-foreground: hsl(0, 0%, 98%);
  --card: hsl(240, 10%, 3.9%);
  --card-foreground: hsl(0, 0%, 98%);
  --border: hsl(240, 3.7%, 15.9%);
  --input: hsl(240, 3.7%, 15.9%);
  --primary: hsl(217, 91%, 60%);
  --primary-foreground: hsl(210, 40%, 98%);
  --secondary: hsl(240, 3.7%, 15.9%);
  --secondary-foreground: hsl(0, 0%, 98%);
  --accent: hsl(240, 3.7%, 15.9%);
  --accent-foreground: hsl(0, 0%, 98%);
  --destructive: hsl(0, 62.8%, 30.6%);
  --destructive-foreground: hsl(0, 0%, 98%);
  --ring: hsl(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', system-ui, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold;
  }

  /* Override input styling to ensure dark cursor */
  input, textarea {
    caret-color: #000000 !important;
  }
}

@layer utilities {
  .gradient-primary {
    background: linear-gradient(135deg, hsl(var(--primary-50)), hsl(214, 100%, 92%));
  }
  
  .text-primary-50 {
    color: hsl(var(--primary-50));
  }
  
  .text-primary-100 {
    color: hsl(214, 95%, 93%);
  }
  
  .text-primary-500 {
    color: hsl(217, 91%, 60%);
  }
  
  .text-primary-600 {
    color: hsl(221, 83%, 53%);
  }
  
  .text-primary-700 {
    color: hsl(224, 76%, 48%);
  }
  
  .text-primary-900 {
    color: hsl(224, 64%, 33%);
  }
  
  .bg-primary-50 {
    background-color: hsl(214, 100%, 97%);
  }
  
  .bg-primary-100 {
    background-color: hsl(214, 95%, 93%);
  }
  
  .bg-primary-500 {
    background-color: hsl(217, 91%, 60%);
  }
  
  .bg-primary-600 {
    background-color: hsl(221, 83%, 53%);
  }
  
  .bg-primary-700 {
    background-color: hsl(224, 76%, 48%);
  }
  
  .bg-primary-900 {
    background-color: hsl(224, 64%, 33%);
  }
  
  .border-primary-300 {
    border-color: hsl(213, 97%, 87%);
  }
  
  .hover\:bg-primary-700:hover {
    background-color: hsl(224, 76%, 48%);
  }
  
  .text-green-500 {
    color: hsl(142, 71%, 45%);
  }
  
  .text-green-600 {
    color: hsl(142, 76%, 36%);
  }
  
  .bg-green-100 {
    background-color: hsl(141, 84%, 93%);
  }
  
  .text-purple-600 {
    color: hsl(271, 91%, 65%);
  }
  
  .bg-purple-100 {
    background-color: hsl(270, 95%, 97%);
  }
  
  .text-primary-200 {
    color: hsl(213, 97%, 87%);
  }
  
  .text-primary-400 {
    color: hsl(215, 84%, 85%);
  }
  
  .bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  }
  
  .from-primary-50 {
    --tw-gradient-from: hsl(214, 100%, 97%);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
  }
  
  .to-indigo-100 {
    --tw-gradient-to: hsl(220, 100%, 95%);
  }
}