: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-500);
	--accent-text: #ffffff;
	--theme-color: var(--accent);
	--control-height: calc(var(--spacing) * 10);
	--glow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
		0 1px 2px color-mix(in srgb, var(--color-black) 6%, 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: #ffffff;
	--listing-primary-shadow:
		0 1px 2px color-mix(in srgb, var(--color-black) 10%, transparent),
		0 0 0 1px color-mix(in srgb, var(--color-black) 8%, transparent);
	--listing-primary-shadow-hover:
		0 1px 3px color-mix(in srgb, var(--color-black) 12%, transparent),
		0 0 0 1px color-mix(in srgb, var(--color-black) 10%, transparent);
	--listing-primary-shadow-active:
		0 0 0 1px color-mix(in srgb, var(--color-black) 12%, transparent);
	--listing-tinted-fill: var(--bg-raised);
	--listing-tinted-fill-hover: var(--color-gray-50);
	--listing-tinted-color: var(--color-gray-900);
	--listing-tinted-shadow:
		0 1px 2px color-mix(in srgb, var(--color-black) 5%, transparent),
		0 0 0 1px color-mix(in srgb, var(--color-black) 6%, transparent);
	--listing-tinted-shadow-hover:
		0 1px 3px color-mix(in srgb, var(--color-black) 7%, transparent),
		0 0 0 1px color-mix(in srgb, var(--color-black) 8%, transparent);
	--listing-tinted-shadow-active:
		0 0 0 1px color-mix(in srgb, var(--color-black) 8%, transparent);
	--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:
		inset 0 1px 0 color-mix(in srgb, var(--color-white) 22%, transparent),
		0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent),
		0 0 24px color-mix(in srgb, var(--accent) 40%, transparent);
	--listing-primary-shadow-hover:
		inset 0 1px 0 color-mix(in srgb, var(--color-white) 32%, transparent),
		0 0 0 1px var(--accent),
		0 0 32px color-mix(in srgb, var(--accent) 52%, transparent);
	--listing-primary-shadow-active:
		inset 0 1px 2px color-mix(in srgb, var(--color-black) 35%, transparent),
		0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
	--listing-tinted-fill: var(--color-gray-800);
	--listing-tinted-fill-hover: var(--color-gray-700);
	--listing-tinted-color: var(--color-white);
	--listing-tinted-shadow:
		0 1px 2px color-mix(in srgb, var(--color-black) 35%, transparent),
		0 0 0 1px color-mix(in srgb, var(--color-white) 8%, transparent);
	--listing-tinted-shadow-hover:
		0 1px 3px color-mix(in srgb, var(--color-black) 40%, transparent),
		0 0 0 1px color-mix(in srgb, var(--color-white) 12%, transparent);
	--listing-tinted-shadow-active:
		0 0 0 1px color-mix(in srgb, var(--color-white) 10%, transparent);
	--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,
input[type="number"],
input[inputmode="decimal"],
input[inputmode="numeric"] {
	font-variant-numeric: tabular-nums;
}

.listing-cta,
.btn,
.btn-primary,
.btn-neutral,
.cta-accent,
.cta-muted,
.home-landing__cta {
	font-family: var(--font-sans);
}