/*
 * Layout-specific styles that cannot be achieved with Tailwind classes.
 * This file contains gradients, custom animations, and specific button styles.
 */

/* ============================================
   Gradient Backgrounds
   ============================================ */
.gradient-orange {
  background: linear-gradient(135deg, #D93611 0%, #D95F18 50%, #F2811D 100%);
}

/* ============================================
   Button Styles
   ============================================ */
.btn-primary {
  background: linear-gradient(135deg, #D93611 0%, #F2811D 100%);
}

.btn-primary:hover {
  box-shadow: 0 4px 12px rgba(217, 54, 17, 0.4);
}

.btn-secondary {
  background: #32D9D9;
}

.btn-secondary:hover {
  background: #008B8B;
}

/* ============================================
   Temperature Display (Operator Layout)
   ============================================ */
.temperature-display {
  font-size: 8rem;
  font-weight: 700;
  line-height: 1;
  color: #32D9D9;
}

.temperature-display.warning {
  color: #F59E0B;
}

.temperature-display.danger {
  color: #EF4444;
  animation: pulse-danger 1s infinite;
}

/* ============================================
   Animations
   ============================================ */
@keyframes pulse-danger {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}