:root {
	color-scheme: light dark;

	--fz-color-gray-50: hsl(210 16.7% 96.3%);
	--fz-color-gray-100: hsl(240 4.8% 95.9%);
	--fz-color-gray-200: hsl(240 5.9% 90%);
	--fz-color-gray-300: hsl(240 4.9% 83.9%);
	--fz-color-gray-400: hsl(240 5% 64.9%);
	--fz-color-gray-500: hsl(240 3.8% 46.1%);
	--fz-color-gray-600: hsl(240 5.2% 33.9%);
	--fz-color-gray-700: hsl(240 5.3% 26.1%);
	--fz-color-gray-800: hsl(240 3.7% 15.9%);
	--fz-color-gray-900: hsl(240 5.9% 10%);
	--fz-color-gray-950: hsl(240 7.3% 8%);

	--fz-color-red-300: hsl(0 93.5% 81.8%);
	--fz-color-red-600: hsl(0 72.2% 50.6%);
	--fz-color-red-800: hsl(0 70% 35.3%);

	--fz-color-orange-300: hsl(30.7 97.2% 72.4%);
	--fz-color-orange-600: hsl(20.5 90.2% 48.2%);
	--fz-color-orange-800: hsl(15 79.1% 33.7%);

	--fz-color-green-300: hsl(141.7 76.6% 73.1%);
	--fz-color-green-600: hsl(142.1 76.2% 36.3%);
	--fz-color-green-800: hsl(142.8 64.2% 24.1%);

	--fz-color-blue-300: hsl(199.4 95.5% 73.9%);
	--fz-color-blue-600: hsl(208 79.7% 51.8%);
	--fz-color-blue-800: hsl(201 90% 27.5%);

	--fz-color-indigo-300: hsl(229.7 93.5% 81.8%);
	--fz-color-indigo-600: hsl(243.4 75.4% 58.6%);
	--fz-color-indigo-800: hsl(243.7 54.5% 41.4%);

	--fz-border-radius-0: 0.0625rem;
	--fz-border-radius-1: 0.125rem;
	--fz-border-radius-2: 0.25rem;
	--fz-border-radius-3: 0.5rem;
	--fz-border-radius-4: 1rem;
	--fz-border-radius-circle: 50%;
	--fz-border-radius-pill: 9999px;

	--fz-shadow-1: 0 1px 2px -1px hsl(220 3% 15% / calc(1% + 9%));
	--fz-shadow-3:
		0 -1px 3px 0 hsl(220 3% 15% / calc(1% + 2%)), 0 1px 2px -5px hsl(
			220 3% 15% /
			calc(1% + 2%)
		), 0 2px 5px -5px hsl(220 3% 15% / calc(1% + 4%)), 0 4px 12px -5px hsl(
			220 3% 15% /
			calc(1% + 5%)
		), 0 12px 15px -5px hsl(220 3% 15% / calc(1% + 7%));
	--fz-shadow-5:
		0 -1px 2px 0 hsl(220 3% 15% / calc(1% + 2%)), 0 2px 1px -2px hsl(
			220 3% 15% /
			calc(1% + 3%)
		), 0 5px 5px -2px hsl(220 3% 15% / calc(1% + 3%)), 0 10px 10px -2px hsl(
			220 3% 15% /
			calc(1% + 4%)
		), 0 20px 20px -2px hsl(220 3% 15% / calc(1% + 5%)), 0 40px 40px -2px hsl(
			220 3% 15% /
			calc(1% + 7%)
		);

	/* 1px */
	--fz-space-0: 0.0625rem;
	/* 2px */
	--fz-space-1: 0.125rem;
	/* 4px */
	--fz-space-2: 0.25rem;
	/* 6px */
	--fz-space-3: 0.375rem;
	/* 8px */
	--fz-space-4: 0.5rem;
	/* 12px */
	--fz-space-5: 0.75rem;
	/* 16px */
	--fz-space-6: 1rem;
	/* 20px */
	--fz-space-7: 1.25rem;
	/* 24px */
	--fz-space-8: 1.5rem;
	/* 28px */
	--fz-space-9: 1.75rem;
	/* 36px */
	--fz-space-10: 2.25rem;
	/* 44px */
	--fz-space-11: 2.75rem;
	/* 48px */
	--fz-space-12: 3rem;
	/* 56px */
	--fz-space-13: 3.5rem;
	/* 72px */
	--fz-space-14: 4.5rem;
	/* 88px */
	--fz-space-15: 5.5rem;
	/* 120px */
	--fz-space-16: 7.5rem;
	/* 160px */
	--fz-space-17: 10rem;
	/* 210px */
	--fz-space-18: 13rem;
	/* 256px */
	--fz-space-19: 16rem;
	/* 320px */
	--fz-space-20: 20rem;

	--fz-font-sans: system-ui, -apple-system, Segoe UI;

	--fz-z-index-100: 100;
	--fz-z-index-200: 200;
	--fz-z-index-300: 300;
	--fz-z-index-important: 2147483647;

	/* 
    Each clamp() uses:
    - A minimum size to ensure legibility on very small screens
    - A fluid calculation (rem + vw) that hits the target size around ~1024px
    - A maximum size to prevent overly large text on very wide screens
  */

	--fz-line-height: calc(2px + 2ex + 2px);

	/* ~10px to 12px */
	--fz-font-size-00: clamp(0.625rem, calc(0.625rem + 0.1vw), 0.75rem);
	/* ~12px to 14px */
	--fz-font-size-0: clamp(0.75rem, calc(0.75rem + 0.1vw), 0.875rem);
	/* ~14px to 16px */
	--fz-font-size-1: clamp(0.875rem, calc(0.875rem + 0.1vw), 1rem);
	/* ~16px to 18px */
	--fz-font-size-2: clamp(1rem, calc(1rem + 0.1vw), 1.125rem);
	/* ~18px to 20px */
	--fz-font-size-3: clamp(1.125rem, calc(1.125rem + 0.1vw), 1.25rem);
	/* ~20px to 22px */
	--fz-font-size-4: clamp(1.375rem, calc(1.375rem + 0.1vw), 1.5rem);
	/* ~24px to 26px */
	--fz-font-size-5: clamp(1.5rem, calc(1.5rem + 0.1vw), 1.625rem);
	/* ~26px to 28px */
	--fz-font-size-6: clamp(1.625rem, calc(1.625rem + 0.1vw), 1.75rem);
}

:where(html) {
	--fz-font-family: var(--fz-font-sans);
	--fz-border-radius: var(--fz-border-radius-2);
	--fz-border-color: var(--fz-border-color-1);
	--fz-border-width: 1px;
	--fz-border: var(--fz-border-width) solid var(--fz-border-color);
	--fz-focus-ring: var(--fz-color-primary-600) solid var(--fz-space-1);
	--fz-focus-ring-offset: var(--fz-space-1);
	--fz-form-control-border: var(--fz-border-width) solid var(--fz-border-color);
	--fz-text-color-error: var(--fz-color-red-600);
	--fz-border-color-error: var(--fz-color-red-600);
	--fz-height-small: var(--fz-space-9);
	--fz-height-medium: var(--fz-space-10);
	--fz-height-large: var(--fz-space-11);
	--fz-color-neutral: light-dark(
		var(--fz-color-gray-900),
		var(--fz-color-gray-100)
	);
	--fz-text-color-neutral: light-dark(
		var(--fz-color-gray-100),
		var(--fz-color-gray-900)
	);
	--fz-text-color-disabled: light-dark(
		var(--fz-color-gray-900),
		var(--fz-color-gray-100)
	);
	--fz-text-color-0: light-dark(
		var(--fz-color-gray-950),
		var(--fz-color-gray-100)
	);
	--fz-text-color-1: light-dark(
		var(--fz-color-gray-800),
		var(--fz-color-gray-100)
	);
	--fz-text-color-2: light-dark(
		var(--fz-color-gray-600),
		var(--fz-color-gray-200)
	);
	--fz-text-color-3: light-dark(
		var(--fz-color-gray-500),
		var(--fz-color-gray-400)
	);
	--fz-surface-color-disabled: light-dark(
		var(--fz-color-gray-300),
		var(--fz-color-gray-900)
	);
	--fz-surface-color-0: light-dark(white, var(--fz-color-gray-900));
	--fz-surface-color-1: light-dark(
		var(--fz-color-gray-100),
		var(--fz-color-gray-800)
	);
	--fz-surface-color-2: light-dark(
		var(--fz-color-gray-200),
		var(--fz-color-gray-700)
	);
	--fz-surface-color-3: light-dark(
		var(--fz-color-gray-300),
		var(--fz-color-gray-600)
	);
	--fz-border-color-0: light-dark(
		var(--fz-color-gray-950),
		var(--fz-color-gray-100)
	);
	--fz-border-color-1: light-dark(
		var(--fz-color-gray-200),
		var(--fz-color-gray-600)
	);
	--fz-border-color-2: light-dark(
		var(--fz-color-gray-700),
		var(--fz-color-gray-400)
	);
	--fz-border-color-3: light-dark(
		var(--fz-color-gray-400),
		var(--fz-color-gray-600)
	);
	--fz-border-color-4: light-dark(
		var(--fz-color-gray-200),
		var(--fz-color-gray-800)
	);
	--fz-color-primary-200: light-dark(
		var(--fz-color-indigo-200),
		var(--fz-color-indigo-200)
	);
	--fz-color-primary-300: light-dark(
		var(--fz-color-indigo-300),
		var(--fz-color-indigo-300)
	);
	--fz-color-primary-600: light-dark(
		var(--fz-color-indigo-600),
		var(--fz-color-indigo-600)
	);
	--fz-color-primary-800: light-dark(
		var(--fz-color-indigo-800),
		var(--fz-color-indigo-800)
	);

	body {
		background-color: var(--fz-surface-color-0);
	}

	/* Note: The public/static/favicon.svg has hardcoded colors to not need other stylesheets */
	--favicon-z-color: var(--fz-color-indigo-600);
	--favicon-f-color: var(--fz-color-gray-900);

	color: var(--fz-text-color-1);
	caret-color: var(--fz-color-primary-600);
}

[data-theme="light"] {
	color-scheme: light;
}

[data-theme="dark"] {
	color-scheme: dark;
}

[class^="fz-text-"] {
	line-height: var(--fz-line-height);
	margin: 0;
}

.fz-text-6 {
	font-size: var(--fz-font-size-6);
}

.fz-text-5 {
	font-size: var(--fz-font-size-5);
}

.fz-text-4 {
	font-size: var(--fz-font-size-4);
}

.fz-text-3 {
	font-size: var(--fz-font-size-3);
}

.fz-text-2 {
	font-size: var(--fz-font-size-2);
}

.fz-text-1 {
	font-size: var(--fz-font-size-1);
}

.fz-text-0 {
	font-size: var(--fz-font-size-0);
}

.fz-text-00 {
	font-size: var(--fz-font-size-00);
}

.fz-text-bold {
	font-weight: 700;
}