:root {
	/* Colors */
	--color-bg: #ffffff;
	/* --color-text: #0f0f0f; */
	--color-text: #000000;
	--color-text-muted: #6b6b6b;
	--color-border: #e2e2e2;
	--color-surface: #f7f7f7;
	--color-surface-hover: #efefef;

	/* Typography */
	--font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-mono: 'Menlo', 'Monaco', 'Consolas', monospace;

	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 2rem;

	--weight-normal: 400;
	--weight-medium: 500;
	--weight-bold: 700;

	--leading-tight: 1.2;
	--leading-normal: 1.6;

	/* Spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;

	/* Layout */
	--container-max: 1200px;
	--sidebar-width: 360px;
	--layout-gap: var(--space-8);
	--radius: 4px;
	--radius-lg: 8px;

	/* Transitions */
	--transition-fast: 120ms ease;
}

/* Base */

body {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	color: var(--color-text);
	background-color: var(--color-bg);
	line-height: var(--leading-normal);
}

/* Layout  */

.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding-inline: var(--space-6);
}

.layout {
	display: grid;
	grid-template-columns: 1fr var(--sidebar-width);
	gap: var(--layout-gap);
	align-items: start;
	padding-block: var(--space-6);
}

@media (max-width: 768px) {
	.layout {
		grid-template-columns: 1fr;
	}
}

/* Header  */

.site-header {
	border-bottom: 1px solid var(--color-border);
	padding-block: var(--space-4);
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.site-name {
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	letter-spacing: -0.03em;
	line-height: var(--leading-tight);
}

.site-tagline {
	margin-top: var(--space-1);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* Footer  */

.site-footer {
	border-top: 1px solid var(--color-border);
	padding-block: var(--space-6);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}