:root {
    --on-rounded-none: 0;
    --on-rounded: 5px;
    
    --on-text-xs: 0.7142857142857143rem;
    --on-text-sm: 0.8571428571428571rem;
    --on-text-md: 0.9285714285714286rem;
    --on-text-base: 1rem;
    --on-text-lg: 1.1428571428571428rem;
    --on-text-xl: 1.2857142857142858rem;
    --on-text-2xl: 1.5714285714285714rem;

    --on-size-1: 0.07142857142857142rem;
    --on-size-3: 0.21428571428571427rem;
    --on-size-6: 0.42857142857142855rem;
    --on-size-9: 0.6428571428571429rem;
    --on-size-12: 0.8571428571428571rem;
    --on-size-15: 1.0714285714285714rem;
    --on-size-18: 1.2857142857142858rem;
    --on-size-22: 1.5714285714285714rem;
    --on-size-30: 2.142857142857143rem;
    --on-size-34: 2.4285714285714284rem;
    --on-size-40: 2.857142857142857rem;
    --on-size-48: 3.4285714285714284rem;
    --on-size-62: 4.428571428571429rem;
    --on-size-74: 5.285714285714286rem;
    --on-size-80: 5.714285714285714rem;
    --on-size-92: 6.571428571428571rem;
    --on-size-104: 7.428571428571429rem;
    --on-size-118: 8.428571428571429rem;

    --on-size-1px: 1px;
	--on-size-2px: 2px;
	--on-size-3px: 3px;
	--on-size-6px: 6px;
	--on-size-9px: 9px;
	--on-size-12px: 12px;
	--on-size-15px: 15px;
    --on-size-16px: 16px;
	--on-size-18px: 18px;
	--on-size-22px: 22px;
	--on-size-30px: 30px;
	--on-size-32px: 32px;
	--on-size-34px: 34px;
	--on-size-36px: 36px;
	--on-size-40px: 40px;
	--on-size-48px: 48px;
	--on-size-62px: 62px;
	--on-size-74px: 74px;
	--on-size-80px: 80px;
	--on-size-92px: 92px;
	--on-size-104px: 104px;
	--on-size-118px: 118px;

    --on-color-transparent: transparent;
    --on-color-white: #ffffff;
    --on-color-white-hover: #ffffff4d;
    
    --on-color-primary-50: #fffbf6;
    --on-color-primary-100: #fde9db;
    --on-color-primary-200: #facbac;
    --on-color-primary-300: #f8af81;
    --on-color-primary-400: #f59355;
    --on-color-primary-500: #f37121;
    --on-color-primary-600: #c85d1b;
    --on-color-primary-700: #a24b16;
    --on-color-primary-800: #7c3a11;
    --on-color-primary-900: #491f04;
    --on-color-primary: #f37121;
    --on-color-primary-hover: #ff9907;

    --on-color-info-50: #F6FEFF;
    --on-color-info-100: #DFF5FB;
    --on-color-info-200: #A9E1F3;
    --on-color-info-300: #7BD0EC;
    --on-color-info-400: #4ABEE4;
    --on-color-info-500: #0DA8DB;
    --on-color-info-600: #0B90BC;
    --on-color-info-700: #09779C;
    --on-color-info-800: #075A75;
    --on-color-info-900: #043242;
    --on-color-info: #0DA8DB;
    --on-color-info-hover: #00bdff;

    --on-color-success-50: #F8FFF6;
    --on-color-success-100: #ECFAE2;
    --on-color-success-200: #C6EAA3;
    --on-color-success-300: #AFE07C;
    --on-color-success-400: #99D757;
    --on-color-success-500: #71C714;
    --on-color-success-600: #67B612;
    --on-color-success-700: #56970F;
    --on-color-success-800: #3E6D0B;
    --on-color-success-900: #223C06;
    --on-color-success: #71C714;
    --on-color-success-hover: #72e700;

    --on-color-warning-50: #FFFEF6;
    --on-color-warning-100: #FEFBEB;
    --on-color-warning-200: #FCF1C1;
    --on-color-warning-300: #F9E695;
    --on-color-warning-400: #F5D551;
    --on-color-warning-500: #F3C921;
    --on-color-warning-600: #DBB41D;
    --on-color-warning-700: #B08F17;
    --on-color-warning-800: #745C0F;
    --on-color-warning-900: #49360A;
    --on-color-warning: #F3C921;
    --on-color-warning-hover: #ffdb05;

    --on-color-error-50: #FFF6F8;
    --on-color-error-100: #FDEAED;
    --on-color-error-200: #F8C3CB;
    --on-color-error-300: #F39BA8;
    --on-color-error-400: #EB5E73;
    --on-color-error-500: #E52944;
    --on-color-error-600: #CE243D;
    --on-color-error-700: #A71D31;
    --on-color-error-800: #6E1320;
    --on-color-error-900: #450C14;
    --on-color-error: #E52944;
    --on-color-error-hover: #ff1035;

    --on-color-gray-50: #F6F8F9;
    --on-color-gray-100: #EBEFF2;
    --on-color-gray-200: #D7DFE6;
    --on-color-gray-300: #B7C3CF;
    --on-color-gray-400: #97A6B6;
    --on-color-gray-500: #5B6A7D;
    --on-color-gray-600: #4A5A6A;
    --on-color-gray-700: #394653;
    --on-color-gray-800: #1F2A34;
    --on-color-gray-900: #121920;
    --on-color-gray: #5B6A7D;
    --on-color-gray-hover: #B7C3CF;

    --on-color-border: #B7C3CF;
    --on-color-border-hover: #f37121;
    --on-color-border-focus: #f37121;
    --on-color-border-light: #D7DFE6;

    --on-color-font: #5B6A7D;
    --on-color-font-light: #B7C3CF;
    --on-color-font-lihgtest: #D7DFE6;
    
    --on-color-icon: #7C8EA3;
    --on-color-icon-light: #B7C3CF;
    --on-color-icon-lightest: #D7DFE6;
    --on-color-icon-hover: #B7C3CF;

    --on-color-field-disabled: #F6F8F9;
    --on-color-field-required: #FEFBEB;

    --on-color-bg: #ffffff;
    --on-color-bg-panel: #5B6A7D;
    --on-color-bg-panel-belt: #4A5A6A;
    --on-color-bg-field: transparent;
    --on-color-bg-selected: #EBEFF2;
    --on-color-bg-selected-primary-light: #fffbf6;
    --on-color-bg-selected-primary: #f37121;

    --on-color-shadow: #7C8EA36E;
    --on-color-shadow-primary: #F371216E;
    --on-color-shadow-info: #0DA8DB6E;
    --on-color-shadow-success: #71C7146E;
    --on-color-shadow-warning: #F3C9216E;
    --on-color-shadow-error: #E529446E;
    --on-color-shadow-white: #FFFFFF6E;

    --on-color-scrollbar-track: #E7ECF0;
    --on-color-scrollbar-thumb: #C5D0DE;
    --on-color-scrollbar-track-dark: #748191;
    --on-color-scrollbar-thumb-dark: #B7C3CF;
    
    --on-color-gradient-primary-start: #f3b121 0%;
    --on-color-gradient-primary-middle: #f37121 50%;
    --on-color-gradient-primary-end: #f35221 100%;

    --on-color-gradient-info-start: #0dc6db 0%;
    --on-color-gradient-info-middle: #0da8db 50%;
    --on-color-gradient-info-end: #0d89db 100%;

    --on-color-gradient-success-start: #98d224 0%;
    --on-color-gradient-success-middle: #71c714 50%;
    --on-color-gradient-success-end: #4cbc0b 100%;

    --on-color-gradient-warning-start: #f3e921 0%;
    --on-color-gradient-warning-middle: #f3c921 50%;
    --on-color-gradient-warning-end: #f3aa21 100%;

    --on-color-gradient-error-start: #ff6b6b 0%;
    --on-color-gradient-error-middle: #e52944 50%;
    --on-color-gradient-error-end: #cf2525 100%;

    --on-color-gradient-gray-start: #b7c3cf 0%;
    --on-color-gradient-gray-middle: #5b6a7d 50%;
    --on-color-gradient-gray-end: #394653 100%;

    --on-color-image-filter: 'none';
    --on-main-font-size: 14px;
    --on-square-medium: 2.8571rem;

    --on-width-menu: 341px;

    /* Workaround - waiting for new UI colors */
    --temp-666: #666;

    --on-border-radius-xxs: 2px;
    --on-border-radius-xs: 4px;
    --on-border-radius-sm: 8px;
    --on-border-radius-md: 12px;
    --on-border-radius-lg: 16px;
    --on-border-radius-xl: 24px;
}