:root {
	/* Light theme (default) */
	--bg-main: #F4F4F2;
	--bg-alt: #EFEFEF;
	--text-primary: #1A1A1A;
	--text-secondary: #4A4A4A;
	--text-muted: #666666;
	--watermark-color: rgba(0, 0, 0, 0.05);
	--card-bg: #E2E2DF;
	--card-border: #CCCCCC;
	--vinyl-outer: #D4D4D0;
	--vinyl-mid: #666666;
	--vinyl-inner: #1A1A1A;
	--btn-bg: #2D2D2D;
	--btn-text: #FFFFFF;
	--shadow-soft: rgba(0, 0, 0, 0.1);
	--shadow-3d-color: #B5B5B2;
	--skill-hover-bg: #1A1A1A;
	--skill-hover-text: #F4F4F2;

	/* Typography */
	--font-display: 'Concrete', 'Space Grotesk', sans-serif;
	--font-mono: 'JetBrains Mono', monospace;
	--font-body: 'Inter', sans-serif;

	/* Layout */
	--sidebar-w: 64px;
	--content-max: 1000px;
	--radius-card: 18px;
	--transition: 300ms ease;

	/* Vinyl avatar */
	--avatar-outer: 400px;
	--avatar-mid: 300px;
	--avatar-inner: 200px;
}

html.dark-theme {
	--bg-main: #0E0E10;
	--bg-alt: #131316;
	--text-primary: #F4F4F2;
	--text-secondary: #A0A0A0;
	--text-muted: #6E6E73;
	--watermark-color: rgba(255, 255, 255, 0.03);
	--card-bg: #18181B;
	--card-border: #27272A;
	--vinyl-outer: #1C1C1F;
	--vinyl-mid: #3A3A3E;
	--vinyl-inner: #F4F4F2;
	--btn-bg: #F4F4F2;
	--btn-text: #0E0E10;
	--shadow-soft: rgba(0, 0, 0, 0.4);
	--shadow-3d-color: #000000;
	--skill-hover-bg: #F4F4F2;
	--skill-hover-text: #1A1A1A;
}

/* Large monitors (1440p / 4K / Ultrawide) */
@media (min-width: 1400px) {
	:root {
		--content-max: 1240px;
		--avatar-outer: 440px;
		--avatar-mid: 330px;
		--avatar-inner: 220px;
	}
}

@media (min-width: 1800px) {
	:root {
		--content-max: 1440px;
		--avatar-outer: 480px;
		--avatar-mid: 360px;
		--avatar-inner: 240px;
	}
}

/* Mobile responsive tokens */
@media (max-width: 640px) {
	:root {
		--avatar-outer: 220px;
		--avatar-mid: 165px;
		--avatar-inner: 110px;
	}
}