@import "tailwindcss";

@layer components {
  /* Custom UI Components */
  .ui__label {
    @apply block text-sm font-medium text-gray-700;
  }

  .ui__input {
    @apply block w-full rounded-md bg-white px-3 py-2.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600;
  }

  /* Custom Font Classes */
  .font-noto-serif-display {
    font-family: 'Noto Serif Display', serif;
  }

  .font-inter {
    font-family: 'Inter', sans-serif;
  }

  /* DevOps Dashboard Connection Status */
  .connection-status--connected {
    @apply bg-emerald-100 text-emerald-700;
  }

  .connection-status--connected .status-dot {
    @apply bg-emerald-500;
  }

  .connection-status--disconnected {
    @apply bg-red-100 text-red-700;
  }

  .connection-status--disconnected .status-dot {
    @apply bg-red-500 animate-pulse;
  }
}