:root {
	--bg: #ffffff;
	--bg-subtle: #fafaf9;
	--surface: #ffffff;
	--surface-hover: #f6f6f5;
	--border: #eaeae7;
	--border-strong: #dad9d5;
	--text: #0b0b0c;
	--text-secondary: #5a5a57;
	--text-muted: #75756e;
	--accent: #3a4dff;
	--accent-fg: #ffffff;
	--link: #2e3ee6;
	--focus: #3a4dff;
	--shadow: 0 1px 2px rgba(11, 11, 12, 0.04);
	--free: #0e9f6e;

	--font-sans: "Geist", system-ui, sans-serif;
	--font-mono: "Geist Mono", ui-monospace, monospace;
	--heading-font: var(--font-sans);

	--fs-100: 11px;
	--fs-200: 12px;
	--fs-300: 13px;
	--fs-400: 14px;
	--fs-500: 15px;
	--fs-600: 17px;
	--fs-700: 19px;
	--fs-800: 22px;
	--fs-h3: clamp(17px, 1.6vw, 19px);
	--fs-h2: clamp(26px, 3.4vw, 40px);
	--fs-h1: clamp(34px, 4.6vw, 56px);
	--fs-display: clamp(44px, 5.4vw, 68px);

	--r-sm: 6px;
	--r-md: 10px;
	--r-lg: 12px;
	--r-xl: 16px;
	--r-2xl: 20px;
	--r-3xl: 24px;
	--r-pill: 999px;

	--shadow-lift: 0 1px 2px rgba(11, 11, 12, 0.04), 0 20px 44px -28px rgba(11, 11, 12, 0.28);
	--shadow-menu: 0 16px 40px rgba(0, 0, 0, 0.14);
	--shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.3);

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--dur-fast: 0.25s;
	--dur: 0.3s;
	--dur-slow: 0.6s;

	--shell-max: 1800px;
	--gutter: clamp(20px, 3vw, 44px);

	/*
	 * The viewport width screenshots are captured at. Anything wider on screen
	 * upscales the image; anything narrower wastes captured pixels. Changing
	 * this means changing viewport_width in the ingest plugin's capture presets
	 * to match — the two numbers are one decision.
	 */
	--shot-max: 1440px;
	--header-h: 64px;
	--sticky-top: 88px;
	--measure-prose: 760px;
	--measure-copy: 52ch;

	--cols-sites: 1;
}

[data-theme="dark"] {
	--bg: #0a0a0b;
	--bg-subtle: #0f0f11;
	--surface: #141416;
	--surface-hover: #1b1b1e;
	--border: #232326;
	--border-strong: #2e2e32;
	--text: #fafafa;
	--text-secondary: #a7a7ad;
	--text-muted: #86868c;
	--accent: #3a4dff;
	--accent-fg: #ffffff;
	--link: #6e7cff;
	--focus: #6e7cff;
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

@media (min-width: 600px) {
	:root {
		--cols-sites: 2;
	}
}

@media (min-width: 1080px) {
	:root {
		--cols-sites: 3;
	}
}

@media (min-width: 1500px) {
	:root {
		--cols-sites: 4;
	}
}

@keyframes dm-shimmer {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: -200% 50%;
	}
}

@keyframes dmPop {
	0% {
		transform: scale(0.6);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

::view-transition-old(root),
::view-transition-new(root) {
	animation: none;
	mix-blend-mode: normal;
}

::view-transition-old(root) {
	z-index: 1;
}

::view-transition-new(root) {
	z-index: 9999;
}