/* TopRank Skills Marketplace Styles */

@layer base {
    body {
        font-family: "Space Grotesk", sans-serif;
        @apply bg-background-light text-text-main;
    }
}

/* Markdown Content Styles */
.markdown-content {
    @apply text-text-main;
}

.markdown-content h1 {
    @apply text-3xl font-bold mb-6 mt-8 text-text-main border-b border-border-light pb-2;
}

.markdown-content h2 {
    @apply text-2xl font-semibold mt-8 mb-4 text-text-main border-b border-border-light pb-2;
}

.markdown-content h3 {
    @apply text-xl font-semibold mt-6 mb-3 text-text-main;
}

.markdown-content h4 {
    @apply text-lg font-semibold mt-4 mb-2 text-text-main;
}

.markdown-content p {
    @apply text-text-muted mb-4 leading-relaxed text-base;
}

.markdown-content ul,
.markdown-content ol {
    @apply mb-4 text-text-muted space-y-2;
}

.markdown-content ul {
    @apply list-disc pl-6;
}

.markdown-content ol {
    @apply list-decimal pl-6;
}

.markdown-content li {
    @apply leading-relaxed;
}

.markdown-content li > p {
    @apply mb-2;
}

.markdown-content code:not(pre code) {
    @apply bg-slate-100 text-primary px-1.5 py-0.5 rounded font-mono text-sm;
}

.markdown-content pre {
    @apply bg-slate-50 p-4 rounded-lg overflow-x-auto mb-6 border border-border-light;
    position: relative;
}

.markdown-content pre code {
    @apply bg-transparent p-0 text-sm font-mono leading-relaxed;
    display: block;
}

.markdown-content blockquote {
    @apply border-l-4 border-primary pl-4 py-2 my-4 italic text-text-muted bg-slate-50 rounded-r;
}

.markdown-content a {
    @apply text-primary hover:text-primary/80 underline;
}

.markdown-content img {
    @apply max-w-full h-auto rounded-lg my-4 shadow-sm;
}

.markdown-content table {
    @apply w-full border-collapse mb-6;
}

.markdown-content table th {
    @apply bg-slate-100 border border-border-light px-4 py-2 text-left font-semibold text-text-main;
}

.markdown-content table td {
    @apply border border-border-light px-4 py-2 text-text-muted;
}

.markdown-content table tr:nth-child(even) {
    @apply bg-slate-50;
}

.markdown-content hr {
    @apply my-8 border-0 border-t border-border-light;
}

.markdown-content strong {
    @apply font-bold text-text-main;
}

.markdown-content em {
    @apply italic;
}

/* Code Block Styles */
.code-block-header {
    @apply flex items-center justify-between px-4 py-2 bg-slate-100 border-x border-t border-border-light rounded-t-lg text-xs font-bold text-text-muted uppercase tracking-wider;
}

.code-block-content {
    @apply bg-slate-50 p-4 border border-border-light rounded-b-lg overflow-x-auto mb-6 font-mono text-sm text-slate-700;
}