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

/* Temperature display styles for real-time monitoring */
.temp-display {
  font-size: clamp(3.5rem, 15vw, 10rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.temp-unit {
  font-size: clamp(1.5rem, 5vw, 4rem);
}

.temp-normal { 
  color: #32D9D9; 
}

.temp-warning { 
  color: #F59E0B; 
}

.temp-cold { 
  color: #3B82F6; /* Blue for cold */
  animation: pulse-cold 1.2s ease-in-out infinite;
}

.temp-danger { 
  color: #EF4444;
  animation: pulse-danger 0.8s ease-in-out infinite;
}

@keyframes pulse-danger {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}

@keyframes pulse-cold {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Critical temperature visual alert - flashing red border */
.critical-border {
  border-color: #EF4444 !important;
  border-width: 3px !important;
  animation: border-flash 1s ease-in-out infinite;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}

@keyframes border-flash {
  0%, 100% { 
    border-color: #EF4444;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
  }
  50% { 
    border-color: #FCA5A5;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.5);
  }
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/