@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme {
    --color-primary-50: #f8f9fa;
    --color-primary-100: #e9ecef;
    --color-primary-200: #dee2e6;
    --color-primary-300: #ced4da;
    --color-primary-400: #adb5bd;
    --color-primary-500: #6c757d;
    --color-primary-600: #495057;
    --color-primary-700: #343a40;
    --color-primary-800: #212529;
    --color-primary-900: #121212;

    --color-accent-light: #e2d8c6;
    --color-accent: #9d8c70;
    --color-accent-dark: #695c4a;

    --font-family-serif: Baskerville, Georgia, "Times New Roman", serif;
    --font-family-sans: "Helvetica Neue", Arial, sans-serif;

    --color-background: #ffffff;
    --color-foreground: #171717;
    --font-sans: var(--font-geist-sans);
    --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
    @theme {
        --color-background: #0a0a0a;
        --color-foreground: #ededed;
    }
}

@layer base {
    body {
        @apply bg-primary-50 text-primary-800 font-serif;
    }

    h1, h2, h3, h4, h5, h6 {
        @apply font-serif text-primary-900 mb-4 font-bold;
    }

    h1 {
        @apply text-3xl md:text-4xl;
    }

    h2 {
        @apply text-2xl md:text-3xl;
    }

    h3 {
        @apply text-xl md:text-2xl;
    }

    a {
        @apply text-accent-dark hover:text-accent transition-colors duration-200;
    }

    blockquote {
        @apply border-l-4 border-accent pl-4 italic my-4;
    }
}

@layer components {
    .blog-post {
        @apply prose prose-lg max-w-none;
    }

    .blog-post h1, .blog-post h2, .blog-post h3 {
        @apply border-b border-primary-200 pb-2;
    }

    .button {
        @apply px-4 py-2 rounded-md bg-accent text-white shadow-sm hover:bg-accent-dark transition-colors duration-200;
    }

    .card {
        @apply bg-white rounded-md shadow-sm p-6 border border-primary-200 hover:shadow-md transition-shadow duration-200;
    }
}