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

@layer base {
    body {
        @apply bg-trade-bg text-slate-200;
    }
}

@layer components {
    .trade-card {
        @apply rounded-2xl border border-trade-border bg-trade-card p-5 shadow-lg shadow-black/20;
    }

    .trade-btn-primary {
        @apply inline-flex items-center justify-center gap-2 rounded-xl bg-emerald-500 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-400;
    }

    .trade-btn-danger {
        @apply inline-flex items-center justify-center gap-2 rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-rose-500;
    }

    .trade-btn-ghost {
        @apply inline-flex items-center justify-center gap-2 rounded-xl border border-trade-border bg-trade-panel px-4 py-2 text-sm font-medium text-slate-300 transition hover:bg-trade-card hover:text-white;
    }

    .trade-nav-item {
        @apply flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium text-slate-400 transition hover:bg-trade-panel hover:text-white;
    }

    .trade-nav-item-active {
        @apply bg-trade-panel text-white border border-trade-border;
    }

    .pnl-positive {
        @apply text-emerald-400;
    }

    .pnl-negative {
        @apply text-rose-400;
    }

    .scan-chip {
        @apply rounded-xl border border-trade-border bg-trade-panel px-4 py-3 text-sm;
    }

    .trade-input {
        @apply w-full rounded-xl border border-trade-border bg-trade-panel px-4 py-2.5 text-white placeholder:text-slate-500 focus:border-emerald-500/50 focus:outline-none focus:ring-2 focus:ring-emerald-500/20;
    }

    .trade-label {
        @apply mb-1.5 block text-sm font-medium text-slate-300;
    }
}