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

@layer base {
    /* ─── GLOBAL DEFAULTS ────────────────────────────────────────────────── */
    body {
        @apply antialiased text-stone-700 bg-white selection:bg-stone-200 selection:text-stone-900;
    }

    /* ─── HEADINGS (The Editorial Signature) ─────────────────────────────── */
    /* Applies the serif, italic, and dark stone color to all headings globally */
    h1, h2, h3, h4, h5, h6 {
        @apply font-serif italic text-stone-900 font-normal leading-tight;
    }

    h1 {
        @apply text-4xl sm:text-5xl md:text-6xl mb-6 sm:mb-8;
    }

    h2 {
        @apply text-3xl sm:text-4xl mb-5 mt-10 sm:mt-12;
    }

    h3 {
        @apply text-2xl sm:text-3xl mb-4 mt-8 sm:mt-10;
    }

    h4 {
        @apply text-xl sm:text-2xl mb-3 mt-6 sm:mt-8;
    }

    h5 {
        @apply text-lg sm:text-xl mb-2 mt-4 sm:mt-6;
    }

    /* ─── BODY TEXT & PARAGRAPHS ─────────────────────────────────────────── */
    p {
        @apply text-base sm:text-lg leading-relaxed mb-6;
    }

    /* ─── LINKS ──────────────────────────────────────────────────────────── */
    a {
        @apply transition-colors duration-300;
    }
    
    /* Target links inside paragraphs specifically for text links */
    p a, li a {
        @apply text-stone-900 underline decoration-stone-300 underline-offset-4 hover:decoration-stone-900 hover:text-stone-600;
    }

    /* ─── LISTS ──────────────────────────────────────────────────────────── */
    ul {
        @apply list-disc list-inside mb-6 space-y-2 text-stone-700 sm:text-lg;
    }

    ol {
        @apply list-decimal list-inside mb-6 space-y-2 text-stone-700 sm:text-lg;
    }

    li > p {
        @apply inline mb-0; /* Prevents awkward spacing if a p tag gets inside an li */
    }

    /* ─── BLOCKQUOTES & PULL QUOTES ──────────────────────────────────────── */
    blockquote {
        @apply border-l-2 border-stone-900 pl-6 my-8 py-2 text-stone-600 font-serif italic text-xl sm:text-2xl leading-relaxed bg-stone-50/50 rounded-r-lg;
    }

    /* ─── SMALL ACCENT TEXT (Like your tags and metadata) ────────────────── */
    small, .accent-text {
        @apply text-[10px] sm:text-[11px] font-bold uppercase tracking-[0.2em] text-stone-400;
    }
}