/* --- Skeleton: Typography --- */

/* Headings */
h1 {
	@apply text-4xl md:text-5xl font-bold;
}
h2 {
	@apply text-3xl md:text-3xl font-bold;
}
h3 {
	@apply text-2xl md:text-2xl font-bold;
}
h4 {
	@apply text-xl md:text-xl font-bold;
}
h5 {
	@apply text-lg md:text-lg font-bold;
}
h6 {
	@apply text-base md:text-base font-bold;
}

/* Blockquote */
blockquote {
	@apply border-l-4 border-l-accent-500 pl-4 text-base text-surface-500 dark:text-surface-400;
}

/* Page Styles */
p {
	@apply text-base text-surface-500 dark:text-surface-400;
}
a:not(.comp-button):not(.list-row):not(.drawer a):not(.app-bar a):not(.logo):not(.card) {
	@apply text-primary-500 underline underline-offset-4 decoration-primary-500/20 decoration-dotted;
}

/* --- Pre and Code --- */
/* For use outside of Skeleton's CodeBlock component */

pre:not(.codeblock pre) {
	@apply bg-surface-700 dark:bg-black/20 text-surface-50 p-4 whitespace-pre-wrap text-base overflow-x-auto rounded;
}

code:not(.codeblock code) {
	@apply bg-surface-500/30 text-black dark:text-white text-xs py-1 px-2 rounded;
}

/* --- KBD (Keyboard) --- */
kbd {
	@apply rounded border-b-[1px] border-surface-500 ring-[1px] ring-surface-500 bg-surface-300 px-1.5 py-0.5 text-sm font-bold dark:bg-slate-700;
}