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

/* Trix Editor Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .trix-dark-mode trix-editor {
    @apply bg-gray-700 text-white border-gray-600;
  }
  
  .trix-dark-mode trix-toolbar {
    @apply bg-gray-800 border-gray-600;
  }
  
  .trix-dark-mode trix-toolbar .trix-button {
    @apply text-gray-300 border-gray-600;
  }
  
  .trix-dark-mode trix-toolbar .trix-button:hover {
    @apply bg-gray-700;
  }
  
  .trix-dark-mode trix-toolbar .trix-button.trix-active {
    @apply bg-gray-700 text-white;
  }
  
  .trix-dark-mode trix-toolbar .trix-button-group {
    @apply border-gray-600;
  }
  
  .trix-dark-mode trix-toolbar .trix-dialog {
    @apply bg-gray-800 border-gray-600;
  }
  
  .trix-dark-mode trix-toolbar .trix-dialog__link-fields input[type="url"],
  .trix-dark-mode trix-toolbar .trix-dialog__link-fields input[type="text"] {
    @apply bg-gray-700 text-white border-gray-600;
  }
  
  .trix-dark-mode trix-editor:focus {
    @apply border-indigo-500;
  }
  
  .trix-dark-mode trix-editor [data-trix-placeholder]:empty:before {
    @apply text-gray-400;
  }
}

/*

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

*/