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

@layer base {
  :root {
    --cor-fundo: #070b13;
    --cor-painel: #ffffff;
    --cor-texto: #1f2937;
    --cor-texto-suave: #64748b;
    --cor-borda: rgba(148, 163, 184, 0.35);
    --cor-destaque: #06b6d4;
    --cor-destaque-texto: #f8fafc;
  }

  body.cms-lobby {
    font-family: 'Bahnschrift', 'Segoe UI', 'Tahoma', sans-serif;
  }
}

@layer components {
  .modal-box-industrial {
    @apply text-slate-100;
  }

  .editor-sidebar {
    @apply fixed inset-0 z-[1000] flex items-center justify-center bg-slate-950/70 p-4 backdrop-blur-md;
  }

  .editor-sidebar.oculto {
    @apply pointer-events-none opacity-0;
  }

  .editor-sidebar:not(.oculto) {
    @apply opacity-100;
  }

  .painel-dashboard-box input,
  .painel-dashboard-box select,
  .painel-dashboard-box textarea {
    @apply w-full rounded-lg border border-slate-600 bg-slate-900/70 px-3 py-2 text-sm text-slate-100 outline-none transition focus:border-cyan-400;
  }

  .painel-dashboard-box label {
    @apply text-sm text-slate-300;
  }

  .modal-overlay {
    @apply fixed inset-0 z-[5000] hidden items-center justify-center bg-slate-950/70 p-4 backdrop-blur;
  }

  .modal-overlay.ativo {
    @apply flex;
  }
}