:root {
	--font-sans: "Geist", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	--font-display: var(--font-sans);
	--default-font-family: var(--font-sans);
	--default-mono-font-family: var(--font-mono);

	--radius-xs: 0px;
	--radius-sm: 0px;
	--radius-md: 2px;
	--radius-lg: 2px;
	--radius-xl: 2px;
	--radius-2xl: 2px;
	--radius-3xl: 2px;

	--bg: var(--color-gray-50);
	--bg-raised: var(--color-white);
	--bg-muted: var(--color-gray-100);
	--text: var(--color-gray-900);
	--text-muted: var(--color-gray-500);
	--border: var(--color-gray-200);
	--accent: var(--color-primary-400);
	--accent-text: var(--color-gray-950);
	--theme-color: var(--accent);
	--glow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
		0 0 14px color-mix(in srgb, var(--accent) 18%, transparent);
	--frost: blur(12px);
	--frost-sm: blur(8px);
	--frost-lg: blur(16px);
	--frost-xl: blur(24px);
	--frost-bg: color-mix(in srgb, var(--bg) 90%, transparent);
	--frost-raised: color-mix(in srgb, var(--bg-raised) 88%, transparent);

	--listing-primary-fill: var(--color-primary-600);
	--listing-primary-fill-hover: var(--color-primary-500);
	--listing-primary-text: var(--color-white);
	--listing-primary-shadow: var(--glow);
	--listing-primary-shadow-active: inset 0 0 0 1px color-mix(in srgb, var(--color-primary-600) 22%, transparent);
	--listing-tinted-fill: var(--bg-raised);
	--listing-tinted-fill-hover: var(--color-gray-50);
	--listing-tinted-color: var(--color-gray-800);
	--listing-tinted-shadow: 0 0 0 1px var(--border);
	--listing-tinted-shadow-active: inset 0 0 0 1px var(--border);
	--listing-raised-fill: var(--bg-raised);
	--listing-raised-fill-hover: var(--color-gray-50);
	--listing-raised-fill-active: var(--color-gray-100);
	--listing-raised-color: var(--color-gray-800);
	--listing-raised-shadow: 0 0 0 1px var(--border);
	--listing-raised-shadow-active: inset 0 0 0 1px var(--border);
}

html.dark {
	--bg: var(--color-gray-900);
	--bg-raised: var(--color-gray-800);
	--bg-muted: var(--color-gray-950);
	--text: var(--color-white);
	--text-muted: var(--color-gray-300);
	--border: var(--color-gray-700);
	--accent: var(--color-primary-400);
	--accent-text: var(--color-gray-950);
	--theme-color: var(--color-gray-950);
	--glow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
		0 0 18px color-mix(in srgb, var(--accent) 28%, transparent);

	--listing-primary-fill: var(--accent);
	--listing-primary-fill-hover: var(--color-primary-300);
	--listing-primary-text: var(--accent-text);
	--listing-primary-shadow: var(--glow);
	--listing-tinted-fill: var(--color-gray-800);
	--listing-tinted-fill-hover: var(--color-gray-700);
	--listing-tinted-color: var(--color-white);
	--listing-raised-fill: var(--color-gray-800);
	--listing-raised-fill-hover: var(--color-gray-700);
	--listing-raised-fill-active: var(--color-gray-700);
	--listing-raised-color: var(--color-white);
	--listing-raised-shadow: 0 0 0 1px var(--border);
}

html {
	height: auto;
	min-height: 100%;
	background-color: var(--bg);
	color: var(--text);
}

body {
	height: auto;
	min-height: 100%;
	font-family: var(--font-sans);
	background-color: var(--bg);
	color: var(--text);
}

.font-display,
.home-landing h1,
.home-landing h2,
.home-landing .home-landing__display,
.home-landing__title,
.home-landing__heading,
.sell-stage__title {
	font-family: var(--font-display);
	letter-spacing: -0.03em;
}

.font-mono,
.appearance-label,
.appearance-mode,
.appearance-theme-name,
.home-landing__kicker,
.home-landing__brand,
.home-landing__cta,
.home-landing__chip {
	font-family: var(--font-mono);
}

.tabular-nums {
	font-variant-numeric: tabular-nums;
}

.listing-cta,
.btn {
	font-family: var(--font-sans);
}