:root {
	/* color variables */
	--colors-zinc-500: #71717a;
	--colors-zinc-600: #52525b;
	--colors-zinc-800: #27272a;
	--colors-zinc-50: #fafafa;
	--colors-zinc-900: #18181b;
	--colors-zinc-300: #d4d4d8;
	--colors-zinc-400: #a1a1aa;
	--colors-zinc-700: #3f3f46;
	--colors-zinc-950: #09090b;
	--colors-zinc-100: #f4f4f5;
	--colors-zinc-200: #e4e4e7;
	--colors-blue-50: #eff6ff;
	--colors-blue-200: #bfdbfe;
	--colors-blue-400: #60a5fa;
	--colors-blue-300: #93c5fd;
	--colors-blue-500: #3b82f6;
	--colors-blue-600: #2563eb;
	--colors-blue-800: #1e40af;
	--colors-blue-100: #dbeafe;
	--colors-blue-700: #1d4ed8;
	--colors-blue-900: #1e3a8a;
	--colors-blue-950: #172554;
	--colors-darken-250: rgba(0, 0, 0, 0.25);
	--colors-lighten-800: rgba(255, 255, 255, 0.8);
	--colors-fuchsia-50: #fdf4ff;
	--colors-fuchsia-200: #f5d0fe;
	--colors-fuchsia-300: #f0abfc;
	--colors-fuchsia-400: #e879f9;
	--colors-fuchsia-500: #d946ef;
	--colors-fuchsia-950: #4a044e;
	--colors-purple-50: #faf5ff;
	--colors-purple-100: #f3e8ff;
	--colors-purple-400: #c084fc;
	--colors-purple-200: #e9d5ff;
	--colors-purple-300: #d8b4fe;
	--colors-purple-700: #7e22ce;
	--colors-yellow-200: #fef08a;
	--colors-yellow-400: #facc15;
	--colors-yellow-500: #eab308;
	--colors-fuchsia-800: #86198f;
	--colors-yellow-600: #ca8a04;
	--colors-yellow-900: #713f12;
	--colors-purple-950: #3b0764;
	--colors-yellow-950: #422006;
	--colors-yellow-50: #fefce8;
	--colors-fuchsia-900: #701a75;
	--colors-darken-650: rgba(0, 0, 0, 0.65);
	--colors-purple-600: #9333ea;
	--colors-darken-200: rgba(0, 0, 0, 0.2);
	--colors-purple-800: #6b21a8;
	--colors-lighten-300: rgba(255, 255, 255, 0.3);
	--colors-purple-500: #a855f7;
	--colors-yellow-100: #fef9c3;
	--colors-yellow-800: #854d0e;
	--colors-purple-900: #581c87;
	--colors-fuchsia-100: #fae8ff;
	--colors-fuchsia-600: #c026d3;
	--colors-yellow-700: #a16207;
	--colors-yellow-300: #fde047;
	--colors-fuchsia-700: #a21caf;
	--action-states-pressed: var(--colors-darken-100);
	--action-states-hover: var(--colors-lighten-200);
	--action-platter-success: var(--colors-emerald-600);
	--swatches-orange-400: var(--colors-yellow-400);
	--swatches-red-700: var(--colors-red-700);
	--swatches-red-500: var(--colors-red-500);
	--swatches-purple-700: var(--colors-purple-700);
	--swatches-purple-600: var(--colors-purple-600);
	--swatches-purple-200: var(--colors-purple-200);
	--swatches-purple-100: var(--colors-purple-100);
	--swatches-pink-700: var(--colors-fuchsia-700);
	--swatches-pink-600: var(--colors-fuchsia-600);
	--swatches-purple-300: var(--colors-purple-300);
	--swatches-pink-500: var(--colors-fuchsia-500);
	--swatches-pink-400: var(--colors-fuchsia-400);
	--swatches-orange-200: var(--colors-yellow-600);
	--swatches-pink-300: var(--colors-fuchsia-300);
	--swatches-pink-100: var(--colors-fuchsia-100);
	--swatches-green-400: var(--colors-emerald-400);
	--swatches-green-300: var(--colors-emerald-300);
	--swatches-red-200: var(--colors-red-200);
	--swatches-green-50: var(--colors-emerald-50);
	--swatches-green-600: var(--colors-emerald-600);
	--swatches-blue-800: var(--colors-blue-800);
	--swatches-blue-500: var(--colors-blue-500);
	--action-platter-destructive: var(--colors-red-600);
	--swatches-blue-200: var(--colors-blue-200);
	--swatches-blue-50: var(--colors-blue-50);
	--surface-drops-shadow: var(--colors-darken-100);
	--swatches-blue-100: var(--colors-blue-100);
	--swatches-grey-700: var(--colors-zinc-700);
	--swatches-green-100: var(--colors-emerald-100);
	--swatches-blue-400: var(--colors-blue-400);
	--swatches-grey-600: var(--colors-zinc-600);
	--swatches-orange-600: var(--colors-yellow-200);
	--swatches-purple-400: var(--colors-purple-400);
	--swatches-green-200: var(--colors-emerald-200);
	--swatches-grey-500: var(--colors-zinc-500);
	--swatches-purple-50: var(--colors-purple-50);
	--swatches-grey-200: var(--colors-zinc-200);
	--swatches-grey-100: var(--colors-zinc-100);
	--swatches-blue-600: var(--colors-blue-600);
	--swatches-grey-50: var(--colors-zinc-50);
	--fix-black: var(--colors-normals-black);
	--swatches-blue-300: var(--colors-blue-300);
	--swatches-red-300: var(--colors-red-300);
	--swatches-purple-500: var(--colors-purple-500);
	--swatches-neutrals-black: var(--colors-normals-black);
	--swatches-green-700: var(--colors-emerald-700);
	--swatches-red-100: var(--colors-red-100);
	--surface-level-level-1-error: var(--colors-red-50);
	--swatches-neutrals-white: var(--colors-normals-white);
	--border-muted: var(--colors-zinc-600);
	--swatches-pink-200: var(--colors-fuchsia-200);
	--border-warning: var(--colors-yellow-600);
	--surface-level-level-1-success: var(--colors-emerald-50);
	--swatches-red-400: var(--colors-red-400);
	--content-info: var(--colors-blue-800);
	--surface-level-level-1-info: var(--colors-blue-50);
	--swatches-orange-50: var(--colors-yellow-50);
	--content-error: var(--colors-red-800);
	--border-error: var(--colors-red-600);
	--content-warning: var(--colors-yellow-800);
	--content-accent: var(--colors-indigo-800);
	--surface-level-level-1-accent: var(--colors-indigo-50);
	--action-platter-field: var(--colors-zinc-100);
	--surface-drops-overlay: var(--colors-darken-650);
	--content-trend-negative: var(--colors-red-500);
	--content-trend-positive: var(--colors-emerald-600);
	--content-inverse: var(--colors-normals-white);
	--swatches-blue-700: var(--colors-blue-700);
	--action-platter-primary: var(--colors-emerald-500);
	--swatches-orange-100: var(--colors-yellow-700);
	--content-muted: var(--colors-zinc-600);
	--content-standard: var(--colors-zinc-800);
	--content-success: var(--colors-emerald-800);
	--swatches-grey-300: var(--colors-zinc-300);
	--swatches-pink-50: var(--colors-fuchsia-50);
	--swatches-green-500: var(--colors-emerald-500);
	--swatches-grey-400: var(--colors-zinc-400);
	--action-platter-accent: var(--colors-indigo-600);
	--swatches-orange-500: var(--colors-yellow-300);
	--swatches-orange-700: var(--colors-yellow-100);
	--border-success: var(--colors-emerald-600);
	--border-strong: var(--colors-zinc-900);
	--content-highlight: var(--colors-fuchsia-800);
	--surface-level-level-1-highlight: var(--colors-fuchsia-50);
	--surface-level-level-1-warning: var(--colors-yellow-50);
	--swatches-orange-300: var(--colors-yellow-500);
	--swatches-blue-900: var(--colors-blue-900);
	--action-states-active: var(--colors-emerald-500);
	--content-subtle: var(--colors-zinc-500);
	--border-info: var(--colors-blue-600);
	--swatches-red-600: var(--colors-red-600);
	--surface-drops-floating: var(--colors-zinc-200);
	--action-platter-secondary: var(--colors-zinc-100);
	--border-inverse: var(--colors-normals-white);
	--surface-drops-base: var(--colors-zinc-50);
	--swatches-red-50: var(--colors-red-50);
	--border-standard: var(--colors-zinc-200);
	--surface-drops-raised: var(--colors-zinc-100);
	--surface-drops-inverse: var(--colors-zinc-950);
	--fix-white: var(--colors-normals-white);
	--colors-red-200: #fecaca;
	--colors-red-300: #fca5a5;
	--colors-red-600: #dc2626;
	--colors-red-700: #b91c1c;
	--colors-red-800: #991b1b;
	--colors-red-400: #f87171;
	--colors-emerald-50: #ecfdf5;
	--colors-red-100: #fee2e2;
	--colors-emerald-200: #a7f3d0;
	--colors-emerald-900: #064e3b;
	--colors-emerald-300: #6ee7b7;
	--colors-emerald-500: #10b981;
	--colors-emerald-800: #065f46;
	--colors-emerald-400: #34d399;
	--colors-red-900: #7f1d1d;
	--colors-red-950: #450a0a;
	--colors-emerald-700: #047857;
	--colors-emerald-100: #d1fae5;
	--colors-emerald-600: #059669;
	--colors-red-50: #fef2f2;
	--colors-red-500: #ef4444;
	--colors-emerald-950: #022c22;
	--colors-normals-white: #fff;
	--colors-normals-black: #000;
	--swatches-grey-800: var(--colors-zinc-800);
	--swatches-grey-900: var(--colors-zinc-900);
	--swatches-grey-950: var(--colors-zinc-950);
	--swatches-blue-950: var(--colors-blue-950);
	--swatches-green-800: var(--colors-emerald-800);
	--swatches-green-900: var(--colors-emerald-900);
	--swatches-green-950: var(--colors-emerald-950);
	--swatches-orange-800: var(--colors-yellow-800);
	--swatches-orange-900: var(--colors-yellow-900);
	--swatches-orange-950: var(--colors-yellow-950);
	--swatches-red-800: var(--colors-red-800);
	--swatches-red-900: var(--colors-red-900);
	--swatches-red-950: var(--colors-red-950);
	--swatches-purple-800: var(--colors-purple-800);
	--swatches-purple-900: var(--colors-purple-900);
	--swatches-purple-950: var(--colors-purple-950);
	--swatches-pink-900: var(--colors-fuchsia-900);
	--swatches-pink-800: var(--colors-fuchsia-800);
	--swatches-pink-950: var(--colors-fuchsia-950);
	--surface-level-level-2-success: var(--colors-emerald-100);
	--surface-level-level-2-error: var(--colors-red-100);
	--surface-level-level-3-warning: var(--colors-yellow-200);
	--surface-level-level-2-info: var(--colors-blue-100);
	--surface-level-level-2-accent: var(--colors-indigo-100);
	--surface-level-level-2-highlight: var(--colors-fuchsia-100);
	--surface-level-level-3-success: var(--colors-emerald-200);
	--surface-level-level-3-error: var(--colors-red-200);
	--surface-level-level-3-info: var(--colors-blue-200);
	--surface-level-level-3-accent: var(--colors-indigo-200);
	--surface-level-level-3-highlight: var(--colors-fuchsia-200);
	--surface-level-level-1-neutral: var(--colors-zinc-100);
	--surface-level-level-2-neutral: var(--colors-zinc-200);
	--surface-level-level-3-neutral: var(--colors-zinc-300);
	--colors-indigo-50: #f5f3ff;
	--colors-indigo-100: #ede9fe;
	--colors-indigo-200: #ddd6fe;
	--colors-indigo-300: #c4b5fd;
	--colors-indigo-400: #a78bfa;
	--colors-indigo-500: #8b5cf6;
	--colors-indigo-600: #7c3aed;
	--colors-indigo-700: #6d28d9;
	--colors-indigo-800: #5b21b6;
	--colors-indigo-900: #4c1d95;
	--colors-indigo-950: #360e73;
	--colors-rose-950: #6d0c2a;
	--colors-rose-900: #881337;
	--colors-rose-800: #9f1239;
	--colors-rose-700: #be123c;
	--colors-rose-600: #e11d48;
	--colors-rose-500: #f43f5e;
	--colors-rose-400: #fb7185;
	--colors-rose-300: #fda4af;
	--colors-rose-200: #fecdd3;
	--colors-rose-100: #ffe4e6;
	--colors-rose-50: #fff1f2;
	--surface-level-level-2-warning: var(--colors-yellow-100);
	--action-states-hover-inverse: var(--colors-darken-50);
	--action-states-pressed-inverse: var(--colors-darken-100);
	--colors-darken-950: rgba(0, 0, 0, 0.95);
	--colors-darken-900: rgba(0, 0, 0, 0.9);
	--colors-darken-800: rgba(0, 0, 0, 0.8);
	--colors-darken-700: rgba(0, 0, 0, 0.7);
	--colors-darken-100: rgba(0, 0, 0, 0.1);
	--colors-darken-50: rgba(0, 0, 0, 0.05);
	--colors-darken-600: rgba(0, 0, 0, 0.6);
	--colors-darken-500: rgba(0, 0, 0, 0.5);
	--colors-darken-400: rgba(0, 0, 0, 0.4);
	--colors-darken-300: rgba(0, 0, 0, 0.3);
	--colors-lighten-200: rgba(255, 255, 255, 0.2);
	--colors-lighten-100: rgba(255, 255, 255, 0.1);
	--colors-lighten-50: rgba(255, 255, 255, 0.05);
	--colors-lighten-950: rgba(228, 228, 230, 0.95);
	--colors-lighten-900: rgba(255, 255, 255, 0.9);
	--colors-lighten-700: rgba(255, 255, 255, 0.7);
	--colors-lighten-600: rgba(255, 255, 255, 0.6);
	--colors-lighten-500: rgba(255, 255, 255, 0.5);
	--colors-lighten-400: rgba(255, 255, 255, 0.4);
	--border-subtle: var(--colors-zinc-400);
	--action-platter-info: var(--colors-blue-600);
	--surface-level-level-4-neutral: var(--colors-zinc-500);
	--surface-level-level-4-success: var(--colors-emerald-400);
	--surface-level-level-4-error: var(--colors-red-400);
	--surface-level-level-4-warning: var(--colors-yellow-400);
	--surface-level-level-4-info: var(--colors-blue-400);
	--surface-level-level-4-accent: var(--colors-indigo-400);
	--surface-level-level-4-highlight: var(--colors-fuchsia-400);
	--action-states-active-muted: var(--colors-darken-100);
	--action-platter-warning: var(--colors-yellow-600);

	/* string variables */
	--font-main: var(--font-main-font);
	--font-accent: var(--font-accent-font);
	--font-main-font: "Inter";
	--font-accent-font: "Libre Baskerville";
	--font-monospace: var(--font-monospace);

	/* number variables */
	--spacing-16: 16px;
	--spacing-8: 8px;
	--spacing-4: 4px;
	--spacing-1: 1px;
	--spacing-0: 0px;
	--spacing-2: 2px;
	--spacing-80: 80px;
	--spacing-20: 20px;
	--spacing-32: 32px;
	--values-9999: 9999px;
	--values-10: 10px;
	--values-40: 40px;
	--values-128: 128px;
	--values-9998: 9999px;
	--values-9: 9px;
	--values-8: 8px;
	--values-7: 7px;
	--spacing-12: 12px;
	--values-6: 6px;
	--spacing-56: 56px;
	--spacing-72: 72px;
	--spacing-64: 64px;
	--values-5: -5px;
	--values-2: 2px;
	--values-16: 16px;
	--spacing-48: 48px;
	--values-0: 0px;
	--values-1: 1px;
	--spacing-40: 40px;
	--values-4: 4px;
	--values-3: 3px;
	--values-24: 24px;
	--values-256: 256px;
	--spacing-24: 24px;
	--size-body-md: 16px;
	--line-height-label-xs: 14px;
	--size-body-s: 14px;
	--line-height-label-sm: 16px;
	--size-heading-h3: 26px;
	--size-heading-h1: 48px;
	--line-height-label-md: 20px;
	--size-body-xl: 24px;
	--line-height-body-md: 24px;
	--line-height-body-lg: 28px;
	--size-heading-h2: 32px;
	--line-height-body-xl: 32px;
	--line-height-body-s: 20px;
	--size-label-md: 14px;
	--line-height-heading-h3: 36px;
	--line-height-heading-h1: 52px;
	--weight-medium: 550px;
	--weight-regular: 400px;
	--size-label-sm: 12px;
	--size-body-lg: 20px;
	--size-label-xs: 10px;
	--line-height-heading-h2: 40px;
	--weight-bold: 800px;
	--icon-sizes-xxl: var(--values-256);
	--icon-sizes-xl: var(--values-128);
	--icon-sizes-m: var(--values-24);
	--icon-sizes-s: var(--values-16);
	--strokes-s: var(--values-1);
	--radius-pill: var(--values-9998);
	--radius-circle: var(--values-9999);
	--strokes-m: var(--values-2);
	--radius-xxl: var(--values-16);
	--icon-sizes-l: var(--values-40);
	--strokes-l: var(--values-3);
	--radius-xl: var(--values-8);
	--radius-s: var(--values-2);
	--radius-l: var(--values-6);
	--radius-m: var(--values-4);
	--component-40: var(--spacing-40);
	--component-32: var(--spacing-32);
	--component-20: var(--spacing-20);
	--component-12: var(--spacing-12);
	--component-8: var(--spacing-8);
	--component-4: var(--spacing-4);
	--space-content-to-content: var(--spacing-32);
	--space-card-to-card: var(--spacing-16);
	--component-0: var(--spacing-0);
	--component-2: var(--spacing-2);
	--container-compact: var(--spacing-12);
	--container-dense: var(--spacing-4);
	--space-content-to-icon: var(--spacing-4);
	--component-1: var(--spacing-1);
	--space-body-to-body: var(--spacing-2);
	--component-24: var(--spacing-24);
	--container-comfortable: var(--spacing-40);
	--space-group-to-group: var(--spacing-48);
	--container-default: var(--spacing-24);
	--space-headline-2-to-body: var(--spacing-48);
	--component-16: var(--spacing-16);
	--space-field-to-field: var(--spacing-8);
	--space-icon-to-icon: var(--spacing-24);
	--space-headline-1-to-body: var(--spacing-16);
	--shadow-modal-x: var(--values-0);
	--shadow-modal-spread: var(--values-5);
	--shadow-card-x: var(--values-0);
	--shadow-card-spread: var(--values-0);
	--shadow-modal-blur: var(--values-40);
	--shadow-card-y: var(--values-1);
	--shadow-modal-y: var(--values-24);
	--shadow-card-blur: var(--values-7);
	--size-accent-h1: 58px;
	--line-height-accent-h1: 67px;
	--size-accent-h2: 44px;
	--line-height-accent-h2: 59px;
	--size-accent-h3: 32px;
	--line-height-accent-h3: 45px;
	--space-section-to-section: var(--spacing-160);
	--spacing-160: 160px;
	--spacing-120: 120px;
	--component-48: var(--spacing-48);
	--component-56: var(--spacing-56);
	--component-64: var(--spacing-64);
	--component-72: var(--spacing-72);
	--component-80: var(--spacing-80);
	--container-standard: var(--spacing-24);
	--colors-alpha-disabled: 45px;
	--action-states-disabled: var(--colors-alpha-disabled);
	--area-large: 48px;
	--area-medium: 40px;
	--area-small: 36px;
	--min-height-s: var(--area-small);
	--min-height-m: var(--area-medium);
	--min-height-l: var(--area-large);
	--size-label-lg: 16px;
	--line-height-label-lg: 20px;
	--area-huge: 56px;
	--min-height-xl: var(--area-huge);
	--space-headline-3-to-body: var(--spacing-12);

	/* responsive margins / paddings */
	--margin-sm: 16px;
	--margin-md: 32px;
}

html {
	height: 100%;
	font-size: 16px;
}



/* text utility classes */

.ui-body-medium {
	color: var(--content-standard);
	font-size: 16px;
	font-family: var(--font-main);
	font-style: normal;
	font-weight: 400;
	line-height: 1.375;
	letter-spacing: 0px;
}

.sub-text-action-platter-primary {
	color: var(--action-platter-primary);
}