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

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

@layer base {
  * {
    @apply border-gray-200;
  }
  
  body {
    @apply bg-gray-50 text-gray-900 font-sans;
    @apply touch-manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  /* Touch-friendly buttons for industrial tablets */
  .btn-touch {
    @apply min-h-[48px] min-w-[48px] touch-manipulation;
  }

  /* Industrial style components */
  .panel {
    @apply bg-white rounded-lg shadow-lg border border-gray-200;
  }

  .status-indicator {
    @apply w-4 h-4 rounded-full;
  }

  .temperature-display {
    @apply font-mono text-2xl font-bold;
  }

  /* Custom scrollbar for touch devices */
  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded hover:bg-gray-500;
  }
}

@layer components {
  /* Touch-optimized button variants */
  .btn {
    @apply inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
    @apply min-h-[44px] px-4 py-2 touch-manipulation;
  }

  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800;
  }

  .btn-secondary {
    @apply bg-secondary-100 text-secondary-900 hover:bg-secondary-200 active:bg-secondary-300;
  }

  .btn-success {
    @apply bg-success-600 text-white hover:bg-success-700 active:bg-success-800;
  }

  .btn-warning {
    @apply bg-warning-500 text-white hover:bg-warning-600 active:bg-warning-700;
  }

  .btn-danger {
    @apply bg-danger-600 text-white hover:bg-danger-700 active:bg-danger-800;
  }

  .btn-lg {
    @apply min-h-[56px] px-6 py-3 text-base;
  }

  .btn-xl {
    @apply min-h-[64px] px-8 py-4 text-lg;
  }

  /* Card components */
  .card {
    @apply panel p-6;
  }

  .card-header {
    @apply flex flex-col space-y-1.5 p-6;
  }

  .card-title {
    @apply text-2xl font-semibold leading-none tracking-tight;
  }

  .card-content {
    @apply p-6 pt-0;
  }

  /* Input components */
  .input {
    @apply flex h-12 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
  }

  /* Status indicators */
  .status-running {
    @apply status-indicator bg-success-500 animate-pulse;
  }

  .status-paused {
    @apply status-indicator bg-warning-500;
  }

  .status-stopped {
    @apply status-indicator bg-gray-400;
  }

  .status-error {
    @apply status-indicator bg-danger-500 animate-bounce;
  }

  /* Temperature displays */
  .temp-normal {
    @apply temperature-display text-success-600;
  }

  .temp-warning {
    @apply temperature-display text-warning-600;
  }

  .temp-critical {
    @apply temperature-display text-danger-600 animate-pulse;
  }
}

@layer utilities {
  /* Touch optimizations */
  .touch-optimized {
    @apply touch-manipulation select-none;
  }

  /* Fade animations */
  .fade-enter {
    @apply opacity-0;
  }

  .fade-enter-active {
    @apply opacity-100 transition-opacity duration-300;
  }

  .fade-exit {
    @apply opacity-100;
  }

  .fade-exit-active {
    @apply opacity-0 transition-opacity duration-300;
  }

  /* Industrial grid layout */
  .industrial-grid {
    @apply grid gap-4 p-4;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  /* Responsive text sizes for different screen sizes */
  .text-responsive {
    @apply text-sm tablet:text-base desktop:text-lg;
  }

  .text-responsive-lg {
    @apply text-base tablet:text-lg desktop:text-xl;
  }

  .text-responsive-xl {
    @apply text-lg tablet:text-xl desktop:text-2xl;
  }
}
