/* Generated by tools/tokens/build-tokens.mjs from tokens/figma-variables.json — do not edit. */
:root {
	--color-base-white: #FFFFFF;
	--color-primary-50: #F0FDFA;
	--color-primary-100: #CCFBF0;
	--color-primary-200: #99F6E2;
	--color-primary-300: #5DEBD2;
	--color-primary-400: #2CD5BC;
	--color-primary-500: #12AD99;
	--color-primary-600: #0C9586;
	--color-primary-700: #0F766C;
	--color-primary-800: #115E58;
	--color-primary-900: #134E49;
	--color-primary-950: #042F2D;
	--color-neutral-50: #FAFAFA;
	--color-neutral-100: #F3F4F6;
	--color-neutral-200: #E1E5EA;
	--color-neutral-300: #D0D5DC;
	--color-neutral-400: #99A4B2;
	--color-neutral-500: #697482;
	--color-neutral-600: #4A5563;
	--color-neutral-700: #39414C;
	--color-neutral-800: #272B30;
	--color-neutral-900: #15191E;
	--color-neutral-950: #070A0D;
	--color-attention-50: #FFF8EA;
	--color-attention-100: #FEEDCB;
	--color-attention-200: #FDD899;
	--color-attention-300: #FCBE59;
	--color-attention-400: #FBA12A;
	--color-attention-500: #F47F0D;
	--color-attention-600: #DF5E08;
	--color-attention-700: #B7430A;
	--color-attention-800: #933510;
	--color-attention-900: #772C11;
	--color-attention-950: #421506;
	--color-error-50: #FEF2F2;
	--color-error-100: #FEE2E2;
	--color-error-200: #FECACA;
	--color-error-300: #FCA5A5;
	--color-error-400: #F87171;
	--color-error-500: #EF4444;
	--color-error-600: #DC2626;
	--color-error-700: #B91C1C;
	--color-error-800: #991B1B;
	--color-error-900: #7F1D1D;
	--color-error-950: #450A0A;
	--color-info-50: #EFF6FF;
	--color-info-100: #DBEAFE;
	--color-info-200: #BFDBFE;
	--color-info-300: #93C5FD;
	--color-info-400: #60A5FA;
	--color-info-500: #3B82F6;
	--color-info-600: #2563EB;
	--color-info-700: #1D4ED8;
	--color-info-800: #1E40AF;
	--color-info-900: #1E3A8A;
	--color-info-950: #172554;
	--color-success-50: #F0FDF4;
	--color-success-100: #DCFCE7;
	--color-success-200: #BBF7D0;
	--color-success-300: #86EFAC;
	--color-success-400: #4ADE80;
	--color-success-500: #22C55E;
	--color-success-600: #16A34A;
	--color-success-700: #15803D;
	--color-success-800: #166534;
	--color-success-900: #14532D;
	--color-success-950: #052E16;
	--font-title: "Kilok", sans-serif;
	--font-body: "Sofia Pro", sans-serif;
	--font-scale: 1;
	--fs-big-number: calc(60px * var(--font-scale));
	--lh-big-number: calc(60px * var(--font-scale) * var(--a11y-lh-scale, 1));
	--ls-big-number: calc(-1px + var(--a11y-ls-add, 0px));
	--fs-h1-l: calc(80px * var(--font-scale));
	--lh-h1-l: calc(80px * var(--font-scale) * var(--a11y-lh-scale, 1));
	--ls-h1-l: calc(-1px + var(--a11y-ls-add, 0px));
	--fs-h1-m: calc(60px * var(--font-scale));
	--lh-h1-m: calc(60px * var(--font-scale) * var(--a11y-lh-scale, 1));
	--ls-h1-m: calc(-1px + var(--a11y-ls-add, 0px));
	--fs-h1-s: calc(40px * var(--font-scale));
	--lh-h1-s: calc(40px * var(--font-scale) * var(--a11y-lh-scale, 1));
	--ls-h1-s: calc(-1px + var(--a11y-ls-add, 0px));
	--fs-h2-m: calc(44px * var(--font-scale));
	--lh-h2-m: calc(44px * var(--font-scale) * var(--a11y-lh-scale, 1));
	--ls-h2-m: calc(-1px + var(--a11y-ls-add, 0px));
	--fs-h2-s: calc(38px * var(--font-scale));
	--lh-h2-s: calc(40px * var(--font-scale) * var(--a11y-lh-scale, 1));
	--ls-h2-s: calc(-1px + var(--a11y-ls-add, 0px));
	--fs-h3: calc(28px * var(--font-scale));
	--lh-h3: calc(28px * var(--font-scale) * var(--a11y-lh-scale, 1));
	--ls-h3: calc(0px + var(--a11y-ls-add, 0px));
	--fs-h4: calc(24px * var(--font-scale));
	--lh-h4: calc(26px * var(--font-scale) * var(--a11y-lh-scale, 1));
	--ls-h4: calc(-1px + var(--a11y-ls-add, 0px));
	--fs-h5: calc(22px * var(--font-scale));
	--lh-h5: calc(24px * var(--font-scale) * var(--a11y-lh-scale, 1));
	--ls-h5: calc(0px + var(--a11y-ls-add, 0px));
	--fs-h6: calc(20px * var(--font-scale));
	--lh-h6: calc(20px * var(--font-scale) * var(--a11y-lh-scale, 1));
	--ls-h6: calc(0px + var(--a11y-ls-add, 0px));
	--fs-m-text: calc(16px * var(--font-scale));
	--lh-m-text: calc(20px * var(--font-scale) * var(--a11y-lh-scale, 1));
	--ls-m-text: calc(0px + var(--a11y-ls-add, 0px));
	--fs-menu-button: calc(16px * var(--font-scale));
	--lh-menu-button: calc(20px * var(--font-scale) * var(--a11y-lh-scale, 1));
	--ls-menu-button: calc(0px + var(--a11y-ls-add, 0px));
	--fs-s-text: calc(14px * var(--font-scale));
	--lh-s-text: calc(18px * var(--font-scale) * var(--a11y-lh-scale, 1));
	--ls-s-text: calc(0px + var(--a11y-ls-add, 0px));
	--fs-xs-text: calc(12px * var(--font-scale));
	--lh-xs-text: calc(15px * var(--font-scale) * var(--a11y-lh-scale, 1));
	--ls-xs-text: calc(0px + var(--a11y-ls-add, 0px));
}

@media (min-width: 768px) {
	:root {
		--fs-big-number: calc(64px * var(--font-scale));
		--lh-big-number: calc(64px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-big-number: calc(-1px + var(--a11y-ls-add, 0px));
		--fs-h1-l: calc(86px * var(--font-scale));
		--lh-h1-l: calc(86px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h1-l: calc(-1px + var(--a11y-ls-add, 0px));
		--fs-h1-m: calc(80px * var(--font-scale));
		--lh-h1-m: calc(80px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h1-m: calc(-1px + var(--a11y-ls-add, 0px));
		--fs-h1-s: calc(44px * var(--font-scale));
		--lh-h1-s: calc(44px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h1-s: calc(-1px + var(--a11y-ls-add, 0px));
		--fs-h2-m: calc(80px * var(--font-scale));
		--lh-h2-m: calc(80px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h2-m: calc(-1px + var(--a11y-ls-add, 0px));
		--fs-h2-s: calc(44px * var(--font-scale));
		--lh-h2-s: calc(44px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h2-s: calc(-1px + var(--a11y-ls-add, 0px));
		--fs-h3: calc(32px * var(--font-scale));
		--lh-h3: calc(32px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h3: calc(0px + var(--a11y-ls-add, 0px));
		--fs-h4: calc(32px * var(--font-scale));
		--lh-h4: calc(32px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h4: calc(-1px + var(--a11y-ls-add, 0px));
		--fs-h5: calc(28px * var(--font-scale));
		--lh-h5: calc(28px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h5: calc(0px + var(--a11y-ls-add, 0px));
		--fs-h6: calc(24px * var(--font-scale));
		--lh-h6: calc(24px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h6: calc(0px + var(--a11y-ls-add, 0px));
		--fs-m-text: calc(20px * var(--font-scale));
		--lh-m-text: calc(24px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-m-text: calc(0px + var(--a11y-ls-add, 0px));
		--fs-menu-button: calc(20px * var(--font-scale));
		--lh-menu-button: calc(24px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-menu-button: calc(0px + var(--a11y-ls-add, 0px));
		--fs-s-text: calc(16px * var(--font-scale));
		--lh-s-text: calc(22px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-s-text: calc(0px + var(--a11y-ls-add, 0px));
		--fs-xs-text: calc(14px * var(--font-scale));
		--lh-xs-text: calc(16px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-xs-text: calc(0px + var(--a11y-ls-add, 0px));
	}
}

@media (min-width: 1440px) {
	:root {
		--fs-big-number: calc(80px * var(--font-scale));
		--lh-big-number: calc(80px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-big-number: calc(-1px + var(--a11y-ls-add, 0px));
		--fs-h1-l: calc(204px * var(--font-scale));
		--lh-h1-l: calc(204px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h1-l: calc(-1px + var(--a11y-ls-add, 0px));
		--fs-h1-m: calc(120px * var(--font-scale));
		--lh-h1-m: calc(120px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h1-m: calc(-1px + var(--a11y-ls-add, 0px));
		--fs-h1-s: calc(56px * var(--font-scale));
		--lh-h1-s: calc(56px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h1-s: calc(-1px + var(--a11y-ls-add, 0px));
		--fs-h2-m: calc(120px * var(--font-scale));
		--lh-h2-m: calc(120px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h2-m: calc(-1px + var(--a11y-ls-add, 0px));
		--fs-h2-s: calc(56px * var(--font-scale));
		--lh-h2-s: calc(56px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h2-s: calc(-1px + var(--a11y-ls-add, 0px));
		--fs-h3: calc(36px * var(--font-scale));
		--lh-h3: calc(36px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h3: calc(0px + var(--a11y-ls-add, 0px));
		--fs-h4: calc(36px * var(--font-scale));
		--lh-h4: calc(36px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h4: calc(-1px + var(--a11y-ls-add, 0px));
		--fs-h5: calc(28px * var(--font-scale));
		--lh-h5: calc(28px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h5: calc(0px + var(--a11y-ls-add, 0px));
		--fs-h6: calc(24px * var(--font-scale));
		--lh-h6: calc(24px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h6: calc(0px + var(--a11y-ls-add, 0px));
		--fs-m-text: calc(20px * var(--font-scale));
		--lh-m-text: calc(24px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-m-text: calc(0px + var(--a11y-ls-add, 0px));
		--fs-menu-button: calc(20px * var(--font-scale));
		--lh-menu-button: calc(24px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-menu-button: calc(0px + var(--a11y-ls-add, 0px));
		--fs-s-text: calc(16px * var(--font-scale));
		--lh-s-text: calc(22px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-s-text: calc(0px + var(--a11y-ls-add, 0px));
		--fs-xs-text: calc(14px * var(--font-scale));
		--lh-xs-text: calc(16px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-xs-text: calc(0px + var(--a11y-ls-add, 0px));
		--grid-columns: 12;
		--grid-gutter: 24px;
		--grid-margin: 56px;
	}
}

@media (min-width: 1920px) {
	:root {
		--fs-big-number: calc(96px * var(--font-scale));
		--lh-big-number: calc(96px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-big-number: calc(-1px + var(--a11y-ls-add, 0px));
		--fs-h1-l: calc(224px * var(--font-scale));
		--lh-h1-l: calc(224px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h1-l: calc(-1px + var(--a11y-ls-add, 0px));
		--fs-h1-m: calc(140px * var(--font-scale));
		--lh-h1-m: calc(140px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h1-m: calc(-1px + var(--a11y-ls-add, 0px));
		--fs-h1-s: calc(76px * var(--font-scale));
		--lh-h1-s: calc(76px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h1-s: calc(-1px + var(--a11y-ls-add, 0px));
		--fs-h2-m: calc(140px * var(--font-scale));
		--lh-h2-m: calc(140px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h2-m: calc(-1px + var(--a11y-ls-add, 0px));
		--fs-h2-s: calc(76px * var(--font-scale));
		--lh-h2-s: calc(76px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h2-s: calc(-1px + var(--a11y-ls-add, 0px));
		--fs-h3: calc(44px * var(--font-scale));
		--lh-h3: calc(44px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h3: calc(0px + var(--a11y-ls-add, 0px));
		--fs-h4: calc(44px * var(--font-scale));
		--lh-h4: calc(44px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h4: calc(-1px + var(--a11y-ls-add, 0px));
		--fs-h5: calc(32px * var(--font-scale));
		--lh-h5: calc(32px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h5: calc(0px + var(--a11y-ls-add, 0px));
		--fs-h6: calc(28px * var(--font-scale));
		--lh-h6: calc(28px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-h6: calc(0px + var(--a11y-ls-add, 0px));
		--fs-m-text: calc(24px * var(--font-scale));
		--lh-m-text: calc(28px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-m-text: calc(0px + var(--a11y-ls-add, 0px));
		--fs-menu-button: calc(24px * var(--font-scale));
		--lh-menu-button: calc(28px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-menu-button: calc(0px + var(--a11y-ls-add, 0px));
		--fs-s-text: calc(20px * var(--font-scale));
		--lh-s-text: calc(24px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-s-text: calc(0px + var(--a11y-ls-add, 0px));
		--fs-xs-text: calc(16px * var(--font-scale));
		--lh-xs-text: calc(18px * var(--font-scale) * var(--a11y-lh-scale, 1));
		--ls-xs-text: calc(0px + var(--a11y-ls-add, 0px));
	}
}