/* ================================================================================================
   FONT IMPORTS & DEFINITIONS
   ================================================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap');

@font-face {
	font-family: var(--font-primary);
	src: url('https://formance01.b-cdn.net/PolymathVar.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}

/* ================================================================================================
   CSS CUSTOM PROPERTIES (DESIGN SYSTEM VARIABLES)
   ================================================================================================ */

:root {
	/* Font Family Variables */
	--font-primary: 'Polymath', 'Figtree', sans-serif;
	--font-secondary: 'Space Grotesk', sans-serif;
	--font-mono: 'Space Mono', monospace;

	/* Base Colors */
	--white: var(--emerald-50);
	--black: var(--emerald-800);

	/* Core Theme Colors */
	--background: var(--white);
	--foreground: var(--black);

	--muted: var(--emerald-100);
	--muted-lighter: 180, 14%, 97%;
	--muted-foreground: var(--emerald-600);

	--card: var(--background);
	--card-foreground: var(--foreground);

	--popover: var(--background);
	--popover-foreground: var(--foreground);

	--border: var(--emerald-200);
	--input: var(--emerald-200);

	--primary: var(--emerald-700);
	--primary-foreground: var(--white);

	--secondary: var(--emerald-100);
	--secondary-foreground: var(--foreground);

	--accent: var(--muted-lighter);
	--accent-foreground: var(--foreground);

	--ring: var(--emerald-500);
	--radius: 0.5rem;

	/* Emerald Palette */
	--emerald-50: 0, 0%, 100%;
	--emerald-100: 180, 14%, 93%;
	--emerald-200: 180, 16%, 89%;
	--emerald-300: 180, 17%, 86%;
	--emerald-400: 184, 13%, 75%;
	--emerald-500: 184, 11%, 53%;
	--emerald-600: 186, 22%, 33%;
	--emerald-700: 187, 97%, 12%;
	--emerald-800: 187, 96%, 9%;
	--emerald-900: 185, 100%, 5%;

	/* Lilac Palette */
	--lilac-100: 240, 82%, 98%;
	--lilac-200: 243, 100%, 96%;
	--lilac-300: 242, 100%, 94%;
	--lilac-400: 243, 100%, 92%;
	--lilac-500: 242, 100%, 90%;
	--lilac-600: 243, 43%, 75%;
	--lilac-700: 242, 29%, 59%;
	--lilac-800: 243, 28%, 44%;
	--lilac-900: 242, 45%, 29%;

	/* Gold Palette */
	--gold-100: 42, 18%, 86%;
	--gold-200: 44, 17%, 74%;
	--gold-300: 42, 17%, 63%;
	--gold-400: 43, 17%, 51%;
	--gold-500: 43, 26%, 39%;
	--gold-600: 43, 26%, 31%;
	--gold-700: 43, 27%, 24%;
	--gold-800: 42, 25%, 16%;
	--gold-900: 42, 25%, 8%;

	/* Cobalt Palette */
	--cobalt-100: 205, 46%, 90%;
	--cobalt-200: 205, 48%, 90%;
	--cobalt-300: 206, 47%, 69%;
	--cobalt-400: 206, 48%, 59%;
	--cobalt-500: 206, 50%, 45%;
	--cobalt-600: 206, 50%, 39%;
	--cobalt-700: 206, 49%, 29%;
	--cobalt-800: 206, 50%, 20%;
	--cobalt-900: 205, 48%, 10%;

	/* Mint Palette */
	--mint-100: 126, 56%, 96%;
	--mint-200: 123, 56%, 93%;
	--mint-300: 122, 52%, 89%;
	--mint-400: 122, 53%, 86%;
	--mint-500: 122, 53%, 82%;
	--mint-600: 123, 27%, 68%;
	--mint-700: 123, 16%, 53%;
	--mint-800: 122, 18%, 39%;
	--mint-900: 122, 25%, 24%;

	/* Semantic Color Backgrounds & Foregrounds */
	--red-background: 2, 93%, 94%;
	--red-foreground: 0, 75%, 42%;
	--orange-background: 19, 100%, 94%;
	--orange-foreground: 18, 89%, 40%;
	--amber-background: 43, 95%, 92%;
	--amber-foreground: 26, 89%, 37%;
	--yellow-background: 45, 100%, 92%;
	--yellow-foreground: 35, 92%, 33%;
	--lime-background: 86, 76%, 92%;
	--lime-foreground: 86, 78%, 27%;
	--green-background: 135, 56%, 89%;
	--green-foreground: 142, 70%, 26%;
	--teal-background: 170, 47%, 90%;
	--teal-foreground: 175, 79%, 26%;
	--cyan-background: 189, 85%, 92%;
	--cyan-foreground: 193, 83%, 31%;
	--sky-background: 202, 82%, 94%;
	--sky-foreground: 201, 94%, 32%;
	--blue-background: 220, 93%, 94%;
	--blue-foreground: 224, 77%, 48%;
	--indigo-background: 240, 92%, 95%;
	--indigo-foreground: 245, 58%, 51%;
	--violet-background: 258, 92%, 95%;
	--violet-foreground: 263, 70%, 50%;
	--purple-background: 269, 100%, 95%;
	--purple-foreground: 272, 72%, 47%;
	--fuchsia-background: 294, 90%, 96%;
	--fuchsia-foreground: 295, 72%, 40%;
	--pink-background: 327, 91%, 96%;
	--pink-foreground: 335, 77%, 42%;
	--rose-background: 351, 100%, 96%;
	--rose-foreground: 346, 82%, 41%;
	--zinc-background: 240, 3%, 93%;
	--zinc-foreground: 240, 5%, 26%;

	/* Sidebar Variables */
	--sidebar-background: var(--background);
	--sidebar-foreground: var(--foreground);
	--sidebar-primary: var(--emerald-400);
	--sidebar-primary-foreground: var(--white);
	--sidebar-accent: var(--accent);
	--sidebar-accent-foreground: var(--foreground);
	--sidebar-border: var(--border);
	--sidebar-ring: var(--ring);
	--sidebar-menu-sub-border: var(--sidebar-primary);

	/* Chart Colors */
	--chart-1: var(--emerald-600);
	--chart-2: var(--lilac-600);
	--chart-3: var(--gold-500);
	--chart-4: var(--cobalt-500);
	--chart-5: var(--mint-500);

	/* Status Colors */
	--valid: var(--green-background);
	--valid-foreground: var(--green-foreground);
	--destructive: var(--red-background);
	--destructive-foreground: var(--red-foreground);
	--warning: var(--amber-background);
	--warning-foreground: var(--amber-foreground);
	--info: var(--sky-background);
	--info-foreground: var(--sky-foreground);
}

/* ================================================================================================
   DARK MODE OVERRIDES
   ================================================================================================ */

.dark {
	/* Base Dark Mode Colors */
	--black: var(--emerald-800);
	--background: var(--emerald-900);
	--foreground: var(--white);

	--muted: 187, 96%, 5%;
	--muted-lighter: 187, 96%, 7%;
	--muted-foreground: var(--emerald-300);

	--popover: var(--background);
	--popover-foreground: var(--foreground);

	--card: var(--background);
	--card-foreground: var(--foreground);

	--border: var(--emerald-700);
	--input: var(--emerald-700);

	--primary: var(--emerald-700);
	--primary-foreground: var(--white);

	--secondary: var(--emerald-800);
	--secondary-foreground: var(--emerald-900);

	--accent: var(--emerald-700);
	--accent-foreground: var(--emerald-100);

	/* Dark Mode Semantic Colors */
	--red-background: 0, 84%, 15%;
	--red-foreground: 0, 91%, 74%;
	--orange-background: 18, 26%, 15%;
	--orange-foreground: 27, 96%, 61%;
	--amber-background: 39, 22%, 15%;
	--amber-foreground: 43, 96%, 56%;
	--yellow-background: 44, 25%, 15%;
	--yellow-foreground: 50, 98%, 54%;
	--lime-background: 88, 17%, 15%;
	--lime-foreground: 82, 85%, 71%;
	--green-background: 143, 18%, 14%;
	--green-foreground: 142, 69%, 58%;
	--teal-background: 185, 17%, 14%;
	--teal-foreground: 171, 77%, 64%;
	--cyan-background: 186, 96%, 8%;
	--cyan-foreground: 186, 96%, 69%;
	--sky-background: 207, 26%, 15%;
	--sky-foreground: 199, 95%, 74%;
	--blue-background: 222, 33%, 18%;
	--blue-foreground: 213, 94%, 68%;
	--indigo-background: 240, 26%, 19%;
	--indigo-foreground: 234, 89%, 74%;
	--violet-background: 256, 26%, 18%;
	--violet-foreground: 256, 92%, 76%;
	--purple-background: 266, 30%, 18%;
	--purple-foreground: 270, 95%, 75%;
	--fuchsia-background: 284, 18%, 17%;
	--fuchsia-foreground: 293, 91%, 73%;
	--pink-background: 317, 18%, 16%;
	--pink-foreground: 329, 86%, 70%;
	--rose-background: 340, 19%, 16%;
	--rose-foreground: 351, 95%, 71%;
	--zinc-background: 240, 4%, 15%;
	--zinc-foreground: 240, 5%, 82%;

	/* Dark Mode Sidebar */
	--sidebar-background: var(--background);
	--sidebar-foreground: var(--foreground);
	--sidebar-primary: var(--emerald-500);
	--sidebar-primary-foreground: var(--white);
	--sidebar-accent: var(--accent);
	--sidebar-accent-foreground: var(--accent-foreground);
	--sidebar-border: var(--border);
	--sidebar-border-items: var(--border);
	--sidebar-ring: var(--ring);

	/* Dark Mode Charts */
	--chart-1: 220 70% 50%;
	--chart-2: 160 60% 45%;
	--chart-3: 30 80% 55%;
	--chart-4: 280 65% 60%;
	--chart-5: 340 75% 55%;

	/* Dark Mode Status Colors */
	--valid: var(--green-background);
	--valid-foreground: var(--green-foreground);
	--destructive: var(--red-background);
	--destructive-foreground: var(--red-foreground);
	--warning: var(--amber-background);
	--warning-foreground: var(--amber-foreground);
	--info: var(--sky-background);
	--info-foreground: var(--sky-foreground);

	/* Dark Mode Specific Components */
	.eyebrow {
		color: hsl(var(--gold-300)) !important;
	}

	#welcome-header {
		background-color: hsl(var(--emerald-900)) !important;
	}

	/* Dark Mode Utility Classes */
	.dark\:bg-codeblock:is(.dark *) {
		background-color: hsl(var(--background)) !important;
	}

	.dark\:text-primary-light:is(.dark *) {
		color: hsl(var(--emerald-200)) !important;
	}
}

.bg-codeblock {
	background-color: hsl(var(--background)) !important;
}

/* ================================================================================================
   GLOBAL BASE STYLES
   ================================================================================================ */

* {
	border-color: hsl(var(--border));
	color: var(--foreground);
}

body {
	font-family: var(--font-primary);
}

p, .paragraph {
	color: hsl(var(--muted-foreground)) !important;
}

/* Font Utility Classes */
.font-primary {
	font-family: var(--font-primary);
	font-variation-settings: 'opsz' 72;
	font-feature-settings: normal;
}

.font-secondary {
	font-family: var(--font-secondary);
}

.font-mono,
.mint-font-mono {
	font-family: var(--font-mono) !important;
	font-variation-settings: 'opsz' 72;
	font-feature-settings: normal;
	letter-spacing: -0.025em;
}

/* Text Utility Classes */
.text-foreground {
	color: hsl(var(--foreground)) !important;
}

.text-muted-foreground {
	color: hsl(var(--muted-foreground)) !important;
}
/* Background Utility Classes */
.bg-background {
	background-color: hsl(var(--background)) !important;
}

.bg-background-light,
.bg-background-dark {
	background-color: hsl(var(--background)) !important;
}

.bg-muted {
	background-color: hsl(var(--muted)) !important;
}

.bg-gradient-to-b {
	background: none !important;
}

.border-b {
	border-color: hsl(var(--border)) !important;
}

/* ================================================================================================
   TYPOGRAPHY OVERRIDES
   ================================================================================================ */

h1,
h1 > p,
h2,
h2 > p,
h3,
h3 > p {
	color: hsl(var(--foreground)) !important;
	font-family: var(--font-primary);
	font-feature-settings: normal;
}

p,
.nav-tabs-item,
#sidebar-group li div,
#navigation-items a,
.navbar-link a {
	color: hsl(var(--muted-foreground)) !important;
}

.eyebrow {
	font-family: var(--font-mono);
	text-transform: uppercase;
	color: hsl(var(--gold-400)) !important;
}

/* ================================================================================================
   NAVIGATION & HEADER COMPONENTS
   ================================================================================================ */

#navbar {
	background-color: hsl(var(--background)) !important;
}

#navbar-transition {
	display: none !important;
}

#navbar .flex.items-center.gap-x-2 button {
	color: hsl(var(--gold-400)) !important;
	border: 1px solid hsl(var(--gold-300)) !important;
}

.nav-tabs-item.font-semibold div {
	background-color: hsl(var(--gold-200)) !important;
}

.nav-dropdown-item-icon {
	border: none;

	img {
		border-radius: var(--radius);
		height: 32px;
		width: 32px;
	}
}

/* ================================================================================================
   WELCOME HERO SECTION
   ================================================================================================ */

#welcome-hero {
	background: url('https://mintlify.s3.us-west-1.amazonaws.com/formance-d105fefb/assets/images/welcome-pattern.png') no-repeat center center / 105% hsl(var(--emerald-700));

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: hsl(var(--emerald-700), 0.7) !important;
	}

	h1 {
		color: hsl(var(--white)) !important;
	}

	p {
		color: hsl(var(--emerald-200)) !important;
	}

	#welcome-button {
		background-color: hsl(var(--gold-500)) !important;
		color: hsl(var(--emerald-200)) !important;
		border-radius: var(--radius);
		padding: 0.5rem 1rem;
	}
}

/* ================================================================================================
   CARD COMPONENTS
   ================================================================================================ */

.card {
	background-color: hsl(var(--background)) !important;
	border: 1px solid hsl(var(--border)) !important;
	border-radius: var(--radius);

	&:hover {
		border: 1px solid hsl(var(--emerald-400)) !important;

		.dark & {
			border: 1px solid hsl(var(--emerald-600)) !important;
		}

	}


	p {
		font-size: 1rem;
	}

	[data-component-part='card-icon'] {
		height: 36px;
		width: 36px;
		border-radius: var(--radius);
		padding: 0.4rem;
		background-color: hsl(var(--emerald-600)) !important;
		display: flex;
		justify-content: center;
		align-items: center;

		svg {
			height: 24px;
			width: 24px;
			fill: hsl(var(--emerald-200)) !important;
			color: hsl(var(--emerald-200)) !important;
			background-color: hsl(var(--emerald-200)) !important;
		}
	}
}

/* ================================================================================================
   BUTTON COMPONENTS
   ================================================================================================ */

.button,
#topbar-cta-button {
	display: inline-block;
	background-color: hsl(var(--emerald-700)) !important;
	color: hsl(var(--emerald-200)) !important;
	border-radius: var(--radius);
}

.tryit-button {
	background-color: hsl(var(--cobalt-500)) !important;
}

/* ================================================================================================
   TABLE OF CONTENTS & FOOTER
   ================================================================================================ */

#table-of-contents {
	svg,
	span {
		color: hsl(var(--foreground)) !important;
	}
}

#table-of-contents-content a {
	color: hsl(var(--muted-foreground)) !important;
}

#footer svg {
	fill: hsl(var(--foreground)) !important;
	color: hsl(var(--foreground)) !important;
	background-color: hsl(var(--foreground)) !important;
}

/* ================================================================================================
   NUMSCRIPT SYNTAX HIGHLIGHTING
   ================================================================================================ */

html.dark .language-numscript .shiki,
html .language-numscript {
	code {
		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
		font-size: 0.875rem;
		line-height: 1.6;
		white-space: pre;
		display: block;
		color: #abb2bf;
		background: none !important;
	}

	/* Comments */
	.token.comment {
		color: hsl(var(--muted-foreground)) !important;
		font-style: italic;
	}

	/* Strings */
	.token.string.regexp {
		color: hsl(var(--cobalt-500)) !important;
	}

	.token.string.quoted {
		color: hsl(var(--mint-800)) !important;
	}

	.token.string.other {
		color: hsl(var(--mint-700)) !important;
	}

	/* Variables & Constants */
	.token.variable.parameter {
		color: hsl(var(--gold-400)) !important;
	}

	.token.constant.numeric.decimal,
	.token.constant.numeric.percentage,
	.token.constant.numeric.fraction {
		color: #d19a66 !important;
	}

	.token.constant.language {
		color: hsl(var(--lilac-700)) !important;
	}

	/* Keywords */
	.token.keyword.meta {
		color: hsl(var(--lilac-600)) !important;
	}

	.token.keyword.control {
		color: hsl(var(--emerald-600)) !important;
	}

	.token.keyword.state {
		color: hsl(var(--lilac-600)) !important;
	}

	/* Functions */
	.token.entity.name.function {
		color: hsl(var(--mint-800)) !important;
		font-weight: 500;
	}
}

/* ================================================================================================
   MERMAID
   ================================================================================================ */

.mermaid {
	.nodes {
		rect {
			fill: hsl(var(--mint-300)) !important;
			stroke: hsl(var(--mint-700)) !important;
		}

		p {
			color: hsl(var(--emerald-700)) !important;
		}
	}

	.edgeLabels {
		.edgeLabel,
		.edgeLabel p {
			background-color: hsl(var(--cobalt-200)) !important;
			color: hsl(var(--cobalt-700)) !important;
		}
	}
}


;(function () {
	const tokenDefs = [
		[/\/\*[\s\S]*?\*\//g, 'comment block'],
		[/\/\/[^\n]*/g, 'comment line'],
		[/"[^"]*"/g, 'string quoted'],
		[/\[[^\]]+\]/g, 'string regexp'],
		[/@[a-zA-Z_]+[a-zA-Z0-9_:]*/g, 'string other'],
		[/\$[a-z_]+[a-z0-9_]*/gi, 'variable parameter'],
		[/\b[0-9]+(?:\.[0-9]+)?%\b/g, 'constant numeric percentage'],
		[/\b[0-9]+\/[0-9]+\b/g, 'constant numeric fraction'],
		[/\b[0-9]+(?:\.[0-9]+)?\b/g, 'constant numeric decimal'],
		[/\b(?:vars|source|destination)\b/gi, 'constant language'],
		[/\b(?:set_tx_meta|set_account_meta)\b/gi, 'keyword meta'],
		[/\b(?:print|fail|save)\b/gi, 'keyword control'],
		[/\b(?:send|remaining|to|max|from)\b/gi, 'entity name function'],
		[/\b(?:account|monetary|asset|number|string|portion)\b/gi, 'keyword state'],
	]

	function escapeHtml(str) {
		return str.replace(/[&<>"']/g, (ch) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[ch]))
	}

	function tokenize(content) {
		const matches = []

		for (const [regex, type] of tokenDefs) {
			let match
			while ((match = regex.exec(content))) {
				matches.push({
					start: match.index,
					end: match.index + match[0].length,
					text: match[0],
					type,
				})
			}
		}

		// Sort by start index
		matches.sort((a, b) => a.start - b.start)

		// Filter overlaps
		const nonOverlapping = []
		let lastEnd = 0
		for (const token of matches) {
			if (token.start >= lastEnd) {
				nonOverlapping.push(token)
				lastEnd = token.end
			}
		}

		return nonOverlapping
	}

	function highlight(content) {
		const tokens = tokenize(content)
		let result = ''
		let lastIndex = 0

		for (const token of tokens) {
			// Add plain text before match
			result += escapeHtml(content.slice(lastIndex, token.start))
			// Add highlighted token
			result += `<span class="token ${token.type}">${escapeHtml(token.text)}</span>`
			lastIndex = token.end
		}

		// Add remaining content
		result += escapeHtml(content.slice(lastIndex))
		return result
	}

	function highlightNumscript() {
		const blocks = document.querySelectorAll('.language-numscript code')
		let processedCount = 0

		blocks.forEach((codeEl) => {
			const block = codeEl.closest('.language-numscript')
			if (!block || block.dataset.highlighted === 'true') {
				if (block && block.hasAttribute('data-loaded')) {
					processedCount++
				}
				return
			}

			const raw = codeEl.textContent
			const lines = raw.split('\n')
			const html = lines.map(highlight).join('\n')
			codeEl.innerHTML = html
			block.dataset.highlighted = 'true'
			block.setAttribute('data-loaded', '')
			processedCount++
		})

		// Keep trying if not all blocks have been processed
		const totalBlocks = document.querySelectorAll('.language-numscript').length
		if (processedCount < totalBlocks) {
			setTimeout(highlightNumscript, 100)
		}
	}

	// Make the function globally available
	window.highlightNumscript = highlightNumscript

	// Initial highlighting on load
	window.addEventListener('load', () => {
		setTimeout(highlightNumscript, 100)
		setTimeout(highlightNumscript, 200)
	})

	// Watch for dynamically added content
	const observer = new MutationObserver((mutations) => {
		mutations.forEach((mutation) => {
			if (mutation.addedNodes.length > 0) {
				// Delay execution to ensure content is fully rendered
				setTimeout(highlightNumscript, 50)
			}
		})
	})

	// Start observing when DOM is ready
	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', () => {
			observer.observe(document.body, {
				childList: true,
				subtree: true,
			})
		})
	} else {
		observer.observe(document.body, {
			childList: true,
			subtree: true,
		})
	}
})()


Formance Cloud

CloudPrem (Tier I)

CloudPrem (Tier II)

Formance Elements

	Formance Cloud	CloudPrem (Tier I)	CloudPrem (Tier 2)	Formance Elements
Control plane (server)	Formance	Formance	Self-hosted	N/A
Control plane (client)	Formance	Self-hosted	Self-hosted	Self-hosted
Data plane	Formance	Self-hosted	Self-hosted	Self-hosted

Deployment

Introduction

Hosting options

Formance Cloud

CloudPrem (Tier I)

CloudPrem (Tier II)

Formance Elements

Deployment

​Hosting options

​Formance Cloud

​CloudPrem (Tier I)

​CloudPrem (Tier II)

​Formance Elements

Hosting options

Formance Cloud

CloudPrem (Tier I)

CloudPrem (Tier II)

Formance Elements