/* Deution Theme critical CSS (header + above-the-fold) */

:root {
	/* Design tokens (minimal subset) */
	--deution-container: 1100px;
	--deution-bp-md: 720px;
	--deution-bp-lg: 1024px;

	--deution-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";

	--deution-color-bg: #fff;
	--deution-color-text: #111;
	--deution-color-muted: #666;
	--deution-color-border: #e6e6e6;
	--deution-color-surface: #fff;
	--deution-color-surface-2: #fafafa;
	--deution-color-primary: #2563eb;
	--deution-color-primary-contrast: #fff;

	--deution-space-0: 0px;
	--deution-space-1: clamp(4px, 0.35vw, 6px);
	--deution-space-2: clamp(8px, 0.7vw, 10px);
	--deution-space-3: clamp(12px, 1vw, 14px);
	--deution-space-4: clamp(16px, 1.4vw, 18px);

	--deution-radius-sm: 10px;
	--deution-radius-md: 12px;
	--deution-shadow-sm: 0 1px 0 rgba(0,0,0,0.03);

	/* Legacy aliases (keep older CSS working) */
	--deution-gap: var(--deution-space-4);
	--deution-border: var(--deution-color-border);
	--deution-muted: var(--deution-color-muted);
}

html { background: var(--deution-color-bg); color: var(--deution-color-text); font-family: var(--deution-font-sans); }

.deution-container {
	max-width: var(--deution-container);
	margin: 0 auto;
	padding: 0 var(--deution-gap);
}

.deution-header {
	border-bottom: 1px solid var(--deution-border);
}

.deution-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	gap: var(--deution-gap);
}

.deution-brand__link {
	text-decoration: none;
	font-weight: 700;
	color: inherit;
}

.deution-nav__menu {
	list-style: none;
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.deution-nav__menu a {
	text-decoration: none;
	color: inherit;
}

/* PJAX progress bar */
#deution-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 0;
	background: currentColor;
	opacity: 0;
	transition: width 180ms linear, opacity 180ms linear;
	pointer-events: none;
	z-index: 999999;
}
html.deution-pjax-loading #deution-progress {
	opacity: 0.9;
}