@import "tailwindcss";

/* ========================================
   TEMA ESCURO PADRÃO - AutomatizaSE
   Altere as variáveis CSS abaixo para mudar
   as cores em todo o projeto
   ======================================== */

:root {
  /* Cores Primárias (Azul AutomatizaSE) */
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6; /* Azul principal */
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;

  /* Cores de Fundo (Tema Escuro) */
  --bg-primary: #111827; /* gray-900 */
  --bg-secondary: #1f2937; /* gray-800 */
  --bg-tertiary: #374151; /* gray-700 */

  /* Cores de Texto */
  --text-primary: #ffffff;
  --text-secondary: #9ca3af; /* gray-400 */
  --text-tertiary: #d1d5db; /* gray-300 */

  /* Cores de Borda */
  --border-primary: #374151; /* gray-700 */
  --border-secondary: #4b5563; /* gray-600 */

  /* Cores de Estado */
  --color-error: #ef4444; /* red-500 */
  --color-success: #10b981; /* green-500 */
  --color-warning: #f59e0b; /* yellow-500 */
}

/* Configuração do tema para Tailwind v4 */
@theme inline {
  /* Cores primárias disponíveis como classes Tailwind */
  --color-primary-50: var(--primary-50);
  --color-primary-100: var(--primary-100);
  --color-primary-200: var(--primary-200);
  --color-primary-300: var(--primary-300);
  --color-primary-400: var(--primary-400);
  --color-primary-500: var(--primary-500);
  --color-primary-600: var(--primary-600);
  --color-primary-700: var(--primary-700);
  --color-primary-800: var(--primary-800);
  --color-primary-900: var(--primary-900);
}

/* Aplicar tema escuro globalmente */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: Arial, Helvetica, sans-serif;
}

/* Classes utilitárias customizadas */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-md font-medium transition-colors;
  }

  .input-default {
    @apply w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-primary-500;
  }

  .card {
    @apply bg-gray-800 rounded-lg p-6 border border-gray-700;
  }

  .text-error {
    @apply text-red-400 text-sm bg-red-900/20 p-3 rounded;
  }

  .text-success {
    @apply text-green-400 text-sm bg-green-900/20 p-3 rounded;
  }
}