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

@layer base {
  body {
    @apply bg-void text-slate-100 font-sans antialiased selection:bg-n8n-500/30 selection:text-n8n-400;
    background-color: #090A0F;
  }
}

/* Custom n8n & ClawHub Design System Classes */
@layer components {
  /* n8n & ClawHub Glass Panel */
  .glass-panel {
    @apply bg-[#0E1017]/90 backdrop-blur-xl border border-[#1E2330] shadow-card-n8n;
  }

  .glass-card {
    @apply bg-[#141824]/80 backdrop-blur-md border border-[#1E2330] hover:border-n8n-500/40 transition-all duration-300;
  }

  .glass-input {
    @apply bg-[#090A0F]/80 border border-[#1E2330] focus:border-n8n-500 focus:ring-1 focus:ring-n8n-500 transition-all duration-200 outline-none;
  }

  /* n8n Signature Gradient Text */
  .gradient-text-n8n {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-n8n-400 via-[#FF8F5A] to-clawhub-400;
  }

  .gradient-text-cyan {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-clawhub-400 via-emerald-400 to-n8n-400;
  }

  /* ClawHub Terminal CLI Callout Block */
  .terminal-box {
    @apply bg-[#07080C] border border-[#1E2330] rounded-xl p-4 font-mono text-xs text-slate-300 shadow-2xl relative overflow-hidden;
  }

  /* n8n Workflow Node Style */
  .n8n-node {
    @apply bg-[#141824] border border-[#1E2330] hover:border-n8n-500/60 rounded-2xl p-4 shadow-lg transition-all duration-300 relative;
  }

  .n8n-node-active {
    @apply border-n8n-500 shadow-glow-n8n ring-1 ring-n8n-500/30;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #090A0F;
}
::-webkit-scrollbar-thumb {
  background: #1E2330;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #FF6D5A;
}