@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

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

@theme {
    --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-serif: 'Source Serif 4', ui-serif, Georgia, 'Times New Roman', serif;

    /* Remap lime-* to Google blue scale; use google-red/yellow/green for accents. */
    --color-google-blue: #4285f4;
    --color-google-red: #ea4335;
    --color-google-yellow: #fbbc05;
    --color-google-green: #34a853;

    --color-lime-50: #e8f0fe;
    --color-lime-100: #d2e3fc;
    --color-lime-200: #aecbfa;
    --color-lime-300: #8ab4f8;
    --color-lime-400: #669df6;
    --color-lime-500: #4285f4;
    --color-lime-600: #1a73e8;
    --color-lime-700: #1967d2;
    --color-lime-800: #185abc;
    --color-lime-900: #174ea6;
    --color-lime-950: #0d47a1;
}

/* Re-assign Flux's gray of choice... */
@theme {
    --color-zinc-50: var(--color-gray-50);
    --color-zinc-100: var(--color-gray-100);
    --color-zinc-200: var(--color-gray-200);
    --color-zinc-300: var(--color-gray-300);
    --color-zinc-400: var(--color-gray-400);
    --color-zinc-500: var(--color-gray-500);
    --color-zinc-600: var(--color-gray-600);
    --color-zinc-700: var(--color-gray-700);
    --color-zinc-800: var(--color-gray-800);
    --color-zinc-900: var(--color-gray-900);
    --color-zinc-950: var(--color-gray-950);
}

@theme {
    --color-accent: var(--color-google-blue);
    --color-accent-content: var(--color-google-blue);
    --color-accent-foreground: #ffffff;
}

@layer theme {
    .dark {
        --color-accent: var(--color-lime-500);
        --color-accent-content: var(--color-lime-400);
        --color-accent-foreground: #ffffff;
    }
}

@custom-variant dark (&:where(.dark, .dark *));

/**
 * Long-form blog HTML from the editor: readable type and clear paragraph rhythm.
 */
@layer components {
    .blog-post-body {
        @apply font-serif text-lg leading-[1.85] text-slate-700 dark:text-slate-300 text-pretty;
    }

    .blog-post-body > *:first-child {
        @apply mt-0;
    }

    .blog-post-body p {
        @apply m-0;
    }

    .blog-post-body p + p {
        @apply mt-10;
    }

    /* Editors that wrap copy in divs instead of p */
    .blog-post-body > div {
        @apply mb-10 last:mb-0;
    }

    .blog-post-body > div + div {
        @apply mt-0;
    }

    .blog-post-body > div:empty {
        @apply mb-0 hidden;
    }

    .blog-post-body h2 {
        @apply font-sans text-2xl font-bold tracking-tight text-slate-900 dark:text-slate-100 mt-12 mb-4 first:mt-0;
    }

    .blog-post-body h3 {
        @apply font-sans text-xl font-bold tracking-tight text-slate-900 dark:text-slate-100 mt-10 mb-3 first:mt-0;
    }

    .blog-post-body h4 {
        @apply font-sans text-lg font-semibold text-slate-900 dark:text-slate-100 mt-8 mb-2 first:mt-0;
    }

    .blog-post-body a {
        @apply text-lime-700 underline decoration-lime-700/40 underline-offset-[3px] transition-colors hover:text-lime-800 hover:decoration-lime-700 dark:text-lime-400 dark:decoration-lime-400/40 dark:hover:text-lime-300;
    }

    .blog-post-body strong {
        @apply font-semibold text-slate-900 dark:text-slate-100;
    }

    .blog-post-body ul {
        @apply my-6 list-disc space-y-2 pl-6 marker:text-lime-600 dark:marker:text-lime-500;
    }

    .blog-post-body ol {
        @apply my-6 list-decimal space-y-2 pl-6 marker:text-lime-600 dark:marker:text-lime-500;
    }

    .blog-post-body li {
        @apply pl-1;
    }

    .blog-post-body blockquote {
        @apply my-8 border-l-[3px] border-lime-500/80 pl-5 text-base italic text-slate-600 dark:border-lime-400/80 dark:text-slate-400;
    }

    .blog-post-body blockquote p {
        @apply m-0;
    }

    .blog-post-body blockquote p + p {
        @apply mt-6;
    }

    .blog-post-body img {
        @apply my-8 w-full max-w-full rounded-2xl border border-slate-200/80 dark:border-slate-700/80;
    }

    .blog-post-body figure {
        @apply my-8;
    }

    .blog-post-body figcaption {
        @apply mt-2 text-center text-sm text-slate-500 dark:text-slate-400;
    }

    .blog-post-body hr {
        @apply my-12 border-0 border-t border-slate-200 dark:border-slate-700;
    }

    .blog-post-body pre {
        @apply my-8 overflow-x-auto rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm leading-relaxed text-slate-800 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-200;
    }

    .blog-post-body code {
        @apply rounded bg-slate-100 px-1.5 py-0.5 font-mono text-[0.9em] text-slate-800 dark:bg-slate-800 dark:text-slate-200;
    }

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

    .blog-post-body table {
        @apply my-8 w-full border-collapse text-left text-base;
    }

    .blog-post-body th {
        @apply border border-slate-200 bg-slate-50 px-3 py-2 font-sans text-sm font-semibold text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100;
    }

    .blog-post-body td {
        @apply border border-slate-200 px-3 py-2 dark:border-slate-700;
    }
}