/**
 * DevElevate Base Styles
 * Reset and base typography using design tokens from tokens.css
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--de-font-sans);
	font-size: var(--de-font-size-base);
	line-height: var(--de-line-height-normal);
	color: var(--de-text-primary);
	background-color: var(--de-bg-base);
	transition: background-color var(--de-transition-normal), color var(--de-transition-normal);
}

a {
	color: var(--de-color-primary);
	text-decoration: none;
}

a:hover {
	color: var(--de-color-primary-hover);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Container */
.de-container {
	max-width: var(--de-container-max);
	margin-inline: auto;
	padding-inline: var(--de-container-pad);
}

/* Prose — long-form content */
.de-prose {
	line-height: var(--de-line-height-loose);
	color: var(--de-text-secondary);
}

.de-prose h2,
.de-prose h3 {
	color: var(--de-text-primary);
	margin-top: var(--de-space-8);
}

.de-prose--muted {
	color: var(--de-text-muted);
}