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

/* CSS Variables for theming */

@theme {
	--color-paper: #f6eee3;
	--color-ink: #100f0f;
    --font-display: 'Baskervville Variable', 'Times New Roman', Times, serif;
    --font-sans: 'Inter Variable', Arial, Helvetica, sans-serif;
}

/* Container utility class */

@layer utilities {
    .container {
        max-width: 80ch;
        margin-left: auto;
        margin-right: auto;
        padding-left: clamp(1rem, 4vw, 2rem);
        padding-right: clamp(1rem, 4vw, 2rem);
        width: 100%;
    }
}

/* Custom scrollbar styles */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--color-ink) 3%, var(--color-paper));
}

::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-ink) 18%, var(--color-paper));
    border-radius: 6px;
    border: 2px solid var(--color-paper);
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--color-ink) 30%, var(--color-paper));
}