/*
    === MARKDOWN STYLING ===
    The styling for all markdown text.
*/
@import url('./globals.css');

@tailwind components;

@layer components {
    .text-title {
        @apply text-crusta-400
    }
    .text-subtitle {
        @apply text-crusta-800;
    }
    .text-disabled {
        @apply text-crusta-300
    }
    .text-paragraph {
        @apply text-black;
    }
    @media (prefers-color-scheme: dark) {
        .text-title {
            @apply text-night-300
        }
        .text-subtitle {
            @apply text-night-400;
        }
        .text-disabled {
            @apply text-night-600
        }
        .text-paragraph {
            @apply text-night-50;
        }
    }
}


article {
    h1 {
        @apply text-3xl font-serif font-bold text-title mb-3 mt-1
    }
    h2 {
        @apply text-2xl font-serif font-semibold text-title mb-2
    }
    h3 {
        @apply text-xl font-serif text-title mb-2
    }
    h4 {
        @apply text-lg font-serif italic text-title mb-2
    }
    p {
        @apply text-black dark:text-night-100 mb-2
    }
    a,
    p > a,
    ul > li > a,
    ol > li > a {
        @apply font-serif text-subtitle text-sm hover:underline data-[level=two]:pl-2 data-[level=three]:pl-4
    }
    blockquote {
        @apply p-4 border-s-4 text-muted-foreground bg-muted
    }
    pre {
        @apply p-2 bg-neutral-300 bg-opacity-50 dark:bg-slate-800 dark:bg-opacity-100 rounded-lg font-mono overflow-y-scroll mb-2
    }
    p > code {
        @apply px-1 bg-neutral-300 bg-opacity-50 dark:bg-slate-600 dark:bg-opacity-100 rounded-md font-mono
    }
    pre > code {
        @apply px-0 bg-transparent rounded-none
    }
    ul {
        @apply p-2 pl-4 mb-2 list-disc text-black dark:text-night-100
    }
    ol {
        @apply ml-2 p-2 pl-4 mb-2 list-decimal text-black dark:text-night-100
    }
    li {
        @apply mb-1
    }
    img {
        @apply relative -z-10 border-4 border-crusta-200 dark:border-night-800 rounded-lg shadow-lgr shadow-crusta-400/20 dark:shadow-night-400/50 my-2
    }
    table {
        @apply border-2 w-full border-collapse mb-2
    }
    tr {
        @apply border-2
    }
    th {
        @apply border-2
    }
    td {
        @apply border-2 text-center
    }
}