@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/filament/**/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

/* Enable class-based dark mode */
@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;

    --color-accent: #d97706;
}

/* Base typography for Baskerville-inspired feel */
body {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.75;
    @apply text-stone-800 antialiased;
}

.dark body {
    @apply text-stone-200;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
}

/* Prose styling for blog post content */
.prose-blog {
    @apply max-w-none;
}

.prose-blog h2 {
    @apply text-2xl font-bold mt-10 mb-4 text-stone-900 dark:text-stone-100;
    font-family: var(--font-display);
}

.prose-blog h3 {
    @apply text-xl font-bold mt-8 mb-3 text-stone-900 dark:text-stone-100;
    font-family: var(--font-display);
}

.prose-blog p {
    @apply mb-5 leading-relaxed;
}

.prose-blog ul {
    @apply list-disc pl-6 mb-5 space-y-2;
}

.prose-blog ol {
    @apply list-decimal pl-6 mb-5 space-y-2;
}

.prose-blog a {
    @apply text-amber-700 dark:text-amber-500 underline underline-offset-2 hover:text-amber-800;
}

.prose-blog blockquote {
    @apply border-l-4 border-amber-500 pl-6 italic text-stone-600 dark:text-stone-400 my-6;
}

.prose-blog pre {
    @apply bg-stone-900 dark:bg-black text-stone-100 rounded-lg p-4 overflow-x-auto my-6 text-sm;
    font-family: var(--font-mono);
}

.prose-blog code {
    font-family: var(--font-mono);
}

.prose-blog p code,
.prose-blog li code {
    @apply bg-stone-100 dark:bg-stone-800 text-amber-700 dark:text-amber-400 rounded px-1.5 py-0.5 text-sm;
}

.prose-blog pre code {
    @apply bg-transparent text-inherit p-0;
}

/* highlight.js token colors for public code blocks (VS Code Dark theme) */
.prose-blog pre code.hljs { @apply bg-transparent p-0; }
.prose-blog .hljs-comment, .prose-blog .hljs-quote { color: #6a9955; font-style: italic; }
.prose-blog .hljs-keyword, .prose-blog .hljs-selector-tag, .prose-blog .hljs-literal, .prose-blog .hljs-section, .prose-blog .hljs-doctag { color: #569cd6; }
.prose-blog .hljs-built_in, .prose-blog .hljs-builtin-name { color: #4ec9b0; }
.prose-blog .hljs-type, .prose-blog .hljs-class .hljs-title, .prose-blog .hljs-title.class_ { color: #4ec9b0; }
.prose-blog .hljs-string, .prose-blog .hljs-attr { color: #ce9178; }
.prose-blog .hljs-number, .prose-blog .hljs-symbol, .prose-blog .hljs-bullet { color: #b5cea8; }
.prose-blog .hljs-title, .prose-blog .hljs-title.function_ { color: #dcdcaa; }
.prose-blog .hljs-meta { color: #9b9b9b; }
.prose-blog .hljs-function .hljs-title { color: #dcdcaa; }
.prose-blog .hljs-params { color: #9cdcfe; }
.prose-blog .hljs-variable, .prose-blog .hljs-template-variable { color: #9cdcfe; }
.prose-blog .hljs-attribute { color: #9cdcfe; }
.prose-blog .hljs-property { color: #9cdcfe; }
.prose-blog .hljs-name { color: #569cd6; }
.prose-blog .hljs-tag { color: #569cd6; }
.prose-blog .hljs-addition { color: #b5cea8; }
.prose-blog .hljs-deletion { color: #f48771; }

.prose-blog img {
    @apply rounded-lg shadow-md my-6 w-full;
}

.prose-blog table {
    @apply w-full border-collapse my-6 text-sm;
}

.prose-blog th {
    @apply border border-stone-300 dark:border-stone-700 px-4 py-2 bg-stone-50 dark:bg-stone-800 font-bold text-left;
}

.prose-blog td {
    @apply border border-stone-300 dark:border-stone-700 px-4 py-2;
}

.prose-blog figure {
    @apply my-6;
}

.prose-blog figcaption {
    @apply text-center text-sm text-stone-500 mt-2;
}

/* Line clamp utility (Tailwind v4 includes line-clamp by default, but keep as fallback) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}